css3 - 关于一个不可描述的css问题，如图

Question

前端小白，实在不知道怎么描述这个效果，只知道后面那条线可以用gradient去实现看看，求大神指点！谢谢!

Answer 1

不用樓上這麼複雜

HTML:

<p>电影</p>

CSS:

p{
    font-size: 30px;
}
p::before,
p::after{
    content: "";
    margin: 0 10px;
    height: 20px;
    display: inline-block;
    vertical-align: -0.2ex;
    border-left: 1px solid red;
}
p::after{
    width: 150px;
    background: linear-gradient(to right,red,transparent) bottom/100% 1px no-repeat;
}

這裡主要是 background 的屬性的問題，這裡用到的格式如下：

background: background-image background-position/background-size background-repeat;

Answer 2

文字前後的修飾 分別使用偽元素實現
透過設定偽元素的border屬性

Answer 3

<style type="text/css">
*{
    margin: 0;
    padding: 0;
    border: 0;
    }
p{
    display: inline-block;
    width: 75px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    color: #000;
    }
p:before{content:'|';font-size:15px;color:red;}

#span1{
    display: inline-block;
    width: 1px;
    height: 15px;
    background: red;
    }
#span2{
    display: inline-block;
    width: 150px;
    height: 1px;
    border-left: 1px solid red;
    background: -moz-linear-gradient(left, red, #fff);
    background: -webkit-linear-gradient(left, red, #fff);
    background: -o-linear-gradient(left, red, #fff);
    }
</style>

<p>电影</p><span id="span1"></span><span id="span2"></span> 

gradient不能給border的顏色漸變，所以就分兩個span來寫，基本上實現了，具體樣式值，就自己改吧。還有gradient的相容性，inline-block間像素的去除方法，再仔細的百度吧。