CSS：文字装饰无法删除覆盖

Question

我想从使用p::first-letter选择器的第一个字母中删除文字修饰。但由于某些未知的原因，我无法做到这一点。

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 
p::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

更新：

好，我知道这是Chrome的工作通过启用 “实验性网络平台功能”。由于某些原因，前缀-webkit-无法触发此行为。这是工作代码。

p::first-letter{ 
     text-decoration: overline; 
     text-decoration-color: rgba(59, 119, 191, 0.68); 
     display: block; 
     color: red; 
     font-weight: bold; 
     background-color: rgba(59, 119, 191, 0.68); 
     margin: 0px 2px 1px 0; 
     padding: 5px 13px 5px 11px; 
     color: #b1ffea; 
    } 

Answer 1

只需添加：

p::first-letter { 
    float: left; 
} 

因此，它是：

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 
p::first-letter { 
 
    float: left; 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Answer 2

不确定，如果这是正确的解决方案。

但是，我们可以使用文本修饰跳过文本修饰跳过link1,link2，但在这里似乎不太合适。

我试图让L和内容作为单独的其余元素，并添加文字修饰它（我知道它不是正确的），但可以帮助你

div{ 
 
    display:flex; 
 
} 
 
p.overline::first-line{ 
 
    display:inline-block; 
 
    width:100%; 
 
    font-weight: bold; 
 
text-decoration:overline; 
 
} 
 

 
p:first-child::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 

 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 
<div> 
 
<p >L</p> 
 

 
    
 
<p class="overline">orem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p> 
 
</div>

希望它可以帮助

Answer 3

这是一个有点破解-Y，但是你可以很容易地通过绘画颜色的小方块在上面，利用摆脱不需要划线的::after伪元素。

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 

 
p::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
} 
 

 
p { 
 
position: relative; 
 
} 
 

 
p::after { 
 
content: ''; 
 
display:block; 
 
position:absolute; 
 
top:0; 
 
left:10px; 
 
width: 16px; 
 
height: 8px; 
 
background-color: rgb(122,163,212); 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Answer 4

可以隐藏，使用如下伪选择，

p::first-line{ 
 
    font-weight: bold; 
 
    text-decoration:overline; 
 
    z-index:-1; 
 
    position:absolute; 
 
} 
 
p::first-letter { 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    padding: 2px 0px 0px 0px; 
 
} 
 
p::before{ 
 
    content:''; 
 
    width:10px; 
 
    height:1px; 
 
    background:rgba(250,250,250,1); 
 
    position:absolute; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

这里同样，如果我改变p::beforebackground:transparent;将无法​​正常工作，如其背景由text-decoration:overline;组成。所以这就是你如何隐藏它。只需为您的pseudo ::before background-color获得正确的background-color即可。

另一个问题是::first-line和::first-letter不支持所有CSS样式属性。