html – 在伪元素之前和之后使用来创建一条线

前端之家收集整理的这篇文章主要介绍了html – 在伪元素之前和之后使用来创建一条线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Pseudo-element:before和:after在标题之前和之后绘制一条线.它正在使用图像: @H_403_2@.mydiv::before { content: url(img/line.png);} .mydiv::after { content: url(img/line.png);}

结果如下:

但是,我希望该行扩展并在标题之前和之后填写整个div,如下所示:

有没有办法为图像指定一个百分比来拉伸?我试试这个,但它不起作用:

@H_403_2@.mydiv img { width: 100%; height: auto; }

解决方法

你不需要两个:之前和之后,2中的任何一个都足够了,而且你被告知,你不需要一个图像.请参阅下面的方法. @H_403_2@#header { width: 100%; height: 50px; margin: 50px 0; text-align: center; font-size: 28px; position: relative; background-color: #57585C; } #header:after { content: ''; width: 100%; border-bottom: solid 1px #fff; position: absolute; left: 0; top: 50%; z-index: 1; } h3 { background-color: #57585C; /* Same as the parents Background */ width: auto; display: inline-block; z-index: 3; padding: 0 20px 0 20px; color: white; position: relative; font-family: calibri; font-weight: lighter; margin: 0; } @H_403_2@<div id="header"> <h3>Last Projects</h3> </div>

猜你在找的HTML相关文章