卡卡網(wǎng)

在前面文章我們介紹了可以通過使用position隱藏元素，本文將繼續(xù)介紹另一種CSS隱藏元素的方法：使用::after偽元素。

實例

demodownload

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠標移到任何一個盒子上隱藏盒子two，<br>使用 <b>::after</b> 偽元素覆蓋。</p>

CSS

/* hide element */
.hide-item {
  position: relative;
}

.hide-item::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

.hide:hover .hide-item::after,
.hide:focus .hide-item::after {
  bottom: 0;
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

代碼解釋

通過將另一個元素放置在與背景顏色相同的頂部，可以在視覺上隱藏一個元素。在這個例子中，一個::after偽元素被覆蓋了，盡管可以使用任何子元素。

雖然在技術(shù)上可行，但此方法需要比其他方法更多的代碼。

相關(guān)文章

• CSS隱藏元素的10種方法之：縮小尺寸
• CSS隱藏元素的10種方法之：使用::after偽元素
• CSS隱藏元素的10種方法之：使用position屬性
• CSS隱藏元素的10種方法之：使用display
• CSS隱藏元素的10種方法之：使用visibility
• CSS隱藏元素的10種方法之：使用clip-path
• CSS隱藏元素的10種方法之：使用transform
• CSS隱藏元素的10種方法之：color Alpha 透明度
• CSS隱藏元素的10種方法之：opacity和filter: opacity()

::after 偽元素

CSS偽元素 ::after用來創(chuàng)建一個偽元素，作為已選中元素的最后一個子元素。通常會配合content屬性來為該元素添加裝飾內(nèi)容。這個虛擬元素默認是行內(nèi)元素。

/* 在鏈接后面加一個箭頭 */
a::after {
  content: "→";
}

語法

element:after  { style properties }  /* CSS2 語法 */

element::after { style properties }  /* CSS3 語法 */

::after 表示法是在CSS 3 中引入的，::符號是用來區(qū)分[偽類]和偽元素的。支持 CSS3 的瀏覽器同時也都支持 CSS2 中引入的表示法:after。

備注： IE8 僅支持:after。

示例

讓我們創(chuàng)建兩個類：一個無趣的和一個有趣的。我們可以在每個段尾添加偽元素來標記他們。

<p class="boring-text">這是些無聊的文字</p>
<p>這是不無聊也不有趣的文字</p>
<p class="exciting-text">在 MDN 上做貢獻簡單又輕松。
按右上角的編輯按鈕添加新示例或改進舊示例！</p>

.exciting-text::after {
  content: "<- 讓人興興興奮！";
  color: green;
}

.boring-text::after {
  content: "<- 無聊！";
  color: red;
}

輸出

相關(guān)文章

• CSS Grid 和 CSS Flexbox 的區(qū)別
• CSS+JS實現(xiàn)的顏色漸變可拖動滑塊
• 詳細介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動畫
• 三種在CSS中排除(不選擇)第一個子標簽的方法
• [實例]純 CSS SVG 畫圓/圓環(huán)/圓弧動畫
• [示例]如何使用CSS將文本環(huán)繞在圖像周圍
• [3示例]如何用CSS實現(xiàn)文本環(huán)繞圖像
• 純CSS實現(xiàn)水平(橫向)滾動列表
• CSS如何創(chuàng)建淡入背景動畫
• 如何為圖像、按鈕和文本在懸停時添加淡入過渡效果

標簽: css  CSS隱藏元素  after偽元素