英文:
Styling Pseudo element ::after shows no line-wrap
问题
// styles.sass
h1::after,
h2::after
position: absolute
margin-top: -0.45em
margin-left: -10px
display: block
width: 107%
height: 0.5em
background: #EFF239
content: ''
z-index: -1
border-bottom: 2px solid #ddd
h2::after
background: #a5f1b1
英文:
I wanted to create an underline effect for the Headings for my blog using css. For that, I used the Pseudo element ::after
for styling and was able to achieve the following results
The problem arises when the length of the Headings exceed the single line length, it doesn't follow the wrap-around effect like the one shown below.
The css style I used to generate this effect is
// styles.sass
h1::after,
h2::after
position: absolute
margin-top: -0.45em
margin-left: -10px
display: block
width: 107%
height: 0.5em
background: #EFF239
content: ''
z-index: -1
border-bottom: 2px solid #ddd
h2::after
background: #a5f1b1
Could someone guide me, how I could also style the ::after element such that the underline follows the Heading text ?
答案1
得分: 2
不要使用伪元素,依赖于阴影效果:
span {
font-size: 30px;
padding: 0 10px;
box-shadow: 0 -.4em 0 #EFF239 inset;
-webkit-box-decoration-break: clone;
}
<span>这里有一些文本 <br> 还有这里</span>
英文:
Don't use pseudo element, rely on box-shadow:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
span {
font-size: 30px;
padding: 0 10px;
box-shadow: 0 -.4em 0 #EFF239 inset;
-webkit-box-decoration-break: clone;
}
<!-- language: lang-html -->
<span>Some text here <br> and here</span>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论