高度和寬度不適用於CSS Content屬性

Question

我試圖為CSS content: ""提供高度和寬度content: ""屬性（繪制一條線）但它不起作用。 這可能適用於它的高度和寬度嗎？ 或者通過content: ""來實現它的任何其他工作content: ""屬性？

擺弄問題

div:after {
    content: '\00af';
    width: 500px;
    height: 100px;
    display: block;
}

我想要實現; 內容跨越整個寬度之前和之后的一行。

________like this_______

Answer 1

實現所需效果的一種可能方法是在border-bottom添加一個偽元素（ div:after在本例中為div:after ），然后將偽元素和包含文本的span放置在span的位置。邊框（白色或與背景顏色相同）與偽元素的邊框重疊。 span文本是居中對齊的，以便產生在它之前和之后有一條線的效果，而實際上該線用於完整的div但只是文本下的部分被隱藏。

注意：我沒有回答原來的問題，因為Tim和chipChocolate.py的答案已經涵蓋了這個問題。 實質上，當您使用內容標記創建行時，您需要將該行視為文本，並使用font-*屬性來增加其大小。

 div { position: relative; text-align: center; width: 200px; margin-bottom: 10px; /* just for demo */ } .small{ font-size: 0.75em; } span { display: inline-block; padding: 0px 2px; /* the more the padding the more the space between text and line */ border-bottom: 2px solid white; } div:after { border-bottom: 2px solid black; width: 100%; position: absolute; content: ''; height: 100%; left: 0px; top: -2px; z-index: -1; } 

 <div> <span>Text</span> </div> <div> <span>Lengthy Text</span> </div> <div> <span>Very Lengthy Text</span> </div> <div class="small"> <span>Smaller Font</span> </div> 

Answer 2

您需要使用font-size 。

 div:after { content: '\\00af'; font-size: 50px; display: block; } 

 <div></div> 

Answer 3

div:after {
    content: '';
    background:black;
    width: 500px;
    height: 1px;
    font-size:50px;
    display: block;
}

---

content: ''; 在div之后放置內容。 將其設置為空。

現在我們可以使用div:after生成條形本身的框，而不是使用文本字符。

---

現在設置background: black; 使酒吧變黑。

然后將您的height和width調整到您想要的酒吧的height和width 。

Answer 4

您的“內容”標記會顯示一行，是嗎？ 那么，發生了什么有你的DIV 寬成為500像素的要求，但它沒有顯示，因為你的CSS正在呈現什么本質上是一個字符，也就是不受width和height屬性。

如果你想改變這一行的外觀，你必須將它視為一個角色。 所以使用font-size或font-weight而不是高度和寬度。