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樣式屬性。