html – 在伪元素之前和之后使用来创建一条线
发布时间:2020-12-14 18:31:04 所属栏目:资源 来源:网络整理
导读:我正在使用Pseudo-element:before和:after在标题之前和之后绘制一条线.它正在使用图像: .mydiv::before {content: url(img/line.png);}.mydiv::after {content: url(img/line.png);} 结果如下: 但是,我希望该行扩展并在标题之前和之后填写整个div,如下所
我正在使用Pseudo-element:before和:after在标题之前和之后绘制一条线.它正在使用图像:
.mydiv::before { content: url(img/line.png);} .mydiv::after { content: url(img/line.png);} 结果如下: 但是,我希望该行扩展并在标题之前和之后填写整个div,如下所示: 有没有办法为图像指定一个百分比来拉伸?我试试这个,但它不起作用: .mydiv img { width: 100%; height: auto; } 解决方法
你不需要两个:之前和之后,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; } <div id="header"> <h3>Last Projects</h3> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |