位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 4.CSS-:before偽元素

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-17

    使用:before偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。插入的新內(nèi)容可以是文本，也可以是圖片等。下面介紹如何使用:before偽元素在<div>元素之前插入文本和圖片。

    【例題】使用:before偽元素插入文本

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div:before{

content: "周星馳大話西游經(jīng)典臺(tái)詞：";

}

</style>

</head>

<body>

<div>“曾經(jīng)有一份真誠的愛情擺在我的面前，我沒有珍惜，等到失去的時(shí)候才追悔莫及，人世間最痛苦的事情莫過于此。如果上天能夠給我一個(gè)重新來過的機(jī)會(huì)，我會(huì)對那個(gè)女孩子說三個(gè)字：‘我愛你’。如果非要給這份愛加上一個(gè)期限，我希望是，一萬年?！?lt;/div>

</body>

</html>

    以上代碼展示了一段經(jīng)典臺(tái)詞。作為解釋行的文字“周星馳大話西游經(jīng)典臺(tái)詞：”沒有直接寫在<div>元素中，而是選擇寫在了:before偽元素里。這里要向大家特別說明，花括號(hào)中的content是必須存在的，如果沒有content,那么:before偽元素就將失去作用。要寫入的文本可以直接寫在引號(hào)內(nèi)。代碼運(yùn)行效果如圖所示。

image.png


繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部