CSS僞類元素：after ：before

時間 2020-03-22

標籤 css 元素欄目 CSS 简体版

原文原文鏈接

CSS中有一個特性容許咱們添加額外元素而不擾亂文檔自己，這就是「僞元素」。web

在最初，僞元素的語法是使用「:」（一個冒號），隨着web的發展，在CSS3中修訂後的僞元素使用「::」（兩個冒號），也就是::before 和 ::after—以區分僞元素和僞類（好比:hover，:active等）,瀏覽器

然而，不管你使用單冒號仍是雙冒號，瀏覽器都將能識別它們。因爲IE8只支持單冒號的格式，安全起見若是你想要更普遍的瀏覽器兼容性那麼仍是使用單冒號的格式吧！安全

使用：字體

使用僞元素是相對容易的，:before 將會在內容以前「添加」一個元素而 :after 將會在內容後「添加」一個元素。在它們之中添加內容咱們可使用 content 屬性。url

<body>
       <blockquote class="a">blockqupte 之間的全部文本都會從常規文本中分離出來，常常會在左、
           右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間。</blockquote>
   </body>spa

結果在前面插入你好。--但沒法用鼠標選擇你好，這些元素實際上並不在文檔中生成。它們將在外部可見，可是你將不會在文檔的源代碼中找到它們，所以，實際上它們是「虛假」的元素。文檔

僞元素樣式

儘管做爲「虛假」的元素，事實上僞元素表現上就像是「真正」的元素，咱們可以給它們添加任何樣式，好比改變它們的顏色、添加背景色、調整字體大小、調整它們中的文本等等。字符串

              float:left;
           }
       </style>

指定僞元素尺寸

默認生成的元素是一個 內聯元素，因而當咱們想要指定它們的高度和寬度時，咱們能夠設display: block把它們聲明爲塊級元素，或 display: inline-block;( 能夠設置寬高的內聯元素) 因爲已經設置float，因此無需設置display:black

blockquote:before{
               content:open-quote;
               font-size: 30px;
               text-align: center;
               line-height: 42px;
               color: crimson;
               display: inline-block;
               background-color: bisque;
               position: relative;
               top: 10px;
               border-radius:25px;
               height: 25px;
               width: 25px;
           }

也能夠引入圖片：

blockquote:before{
               content: "";
               display: inline-block;
               height: 30px;
               width: 30px;
               background-image:url(img/2016-11-28_161639.png);
           }

咱們仍舊聲明瞭content屬性，並且此時使用了空字符串。content屬性是必須的並且應該常常被應用。不然，僞元素不管如何都沒法正常工做。