在 WordPress 網站上，在一篇博客文章中，我試圖實作在影像標題左側有一個彩色矩形的效果：
我試過這個，但它把矩形垂直跨越整個標題。換句話說，當文本向下換行一行或多行時，矩形繼續向下跨越文本。就我而言，我只希望矩形出現在環繞文本的第一行旁邊。
這就是我現在所擁有的。
div.wp-caption p.wp-caption-text {
border-top: 40px solid;
padding-left: 12px;
border-color: #008ed4;
}
uj5u.com熱心網友回復：
我建議使用:before選擇器并嘗試這樣的事情：
div.wp-caption p.wp-caption-text {
position: relative;
margin-left: 60px;
}
div.wp-caption p.wp-caption-text:before {
content: '';
display: block;
height: 8px;
width: 46px;
left: -60px;
position: absolute;
background-color: #008ed4;
}
使用 css :before 選擇器并給它 acontent: '';允許您實質上使用 css 偽造將專案添加到 dom。
我不確定這是否正是您想要的，但我認為這足以讓您開始。
uj5u.com熱心網友回復：
您可以縮進標題的第一行，然后放入一個縮進的背景影像（線性漸變）。
這意味著標題將環繞在藍色矩形下，我不確定這是否是您想要的（如果不是，那么@BrettEast 對偽元素的建議看起來很有希望）。
div {
text-indent: 2.5em;
background-image: linear-gradient(#008ed4, #008ed4);
background-size: 2em 0.75em;
background-position: left 0.25em;
background-repeat: no-repeat;
}<div>aaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aa aaaaaaaaa </div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/355632.html
標籤：css WordPress的