我试图使用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;
}