卡卡網(wǎng)

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

實(shí)例

demodownload

HTML

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

<p>鼠標(biāo)移到任何一個(gè)盒子上隱藏盒子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;
}

代碼解釋

通過(guò)將另一個(gè)元素放置在與背景顏色相同的頂部，可以在視覺上隱藏一個(gè)元素。在這個(gè)例子中，一個(gè)::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用來(lái)創(chuàng)建一個(gè)偽元素，作為已選中元素的最后一個(gè)子元素。通常會(huì)配合content屬性來(lái)為該元素添加裝飾內(nèi)容。這個(gè)虛擬元素默認(rèn)是行內(nèi)元素。

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

語(yǔ)法

element:after  { style properties }  /* CSS2 語(yǔ)法 */

element::after { style properties }  /* CSS3 語(yǔ)法 */

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

備注： IE8 僅支持:after。

示例

讓我們創(chuàng)建兩個(gè)類：一個(gè)無(wú)趣的和一個(gè)有趣的。我們可以在每個(gè)段尾添加偽元素來(lái)標(biāo)記他們。

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

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

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

輸出

相關(guān)文章

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

標(biāo)簽: css  CSS隱藏元素  after偽元素