css如何實現(xiàn)帶橫線的箭頭

本篇內(nèi)容主要講解“css如何實現(xiàn)帶橫線的箭頭”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css如何實現(xiàn)帶橫線的箭頭”吧!

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設計、成都外貿(mào)網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)龍子湖免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

方法：1、定義一個空元素；2、用“::before”和content插入橫線，語法“元素::before{content:"——"}”；3、用“::after”和content插入箭頭，語法“元素::after{content:">"}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css實現(xiàn)帶橫線的箭頭

實現(xiàn)方法：

  • 定義一個空元素，（例如不包含內(nèi)容的span標簽）

  • 使用::before選擇器和content屬性插入橫線

  • 使用::after選擇器和content屬性插入箭頭

實現(xiàn)示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span::before{
content: "——";
}
span::after{
content: ">";
}
p::before{
content: "<";
}
p::after{
content: "=";
}
    </style>
</head>
 
<body>
    <span></span>
<p></p>
</body>
 
</html>

css如何實現(xiàn)帶橫線的箭頭

說明：::before選擇器和::after選擇器

::before 選擇器向選定的元素前插入內(nèi)容。

::after選擇器向選定的元素后插入內(nèi)容。

::before選擇器和::after選擇器都需要使用content 屬性來指定要插入的內(nèi)容。

擴展知識：content 的使用場景

content 的定義中就提到過是和 :before 及 :after 偽元素配合使用。:before 及 :after 是最常見的偽元素，想必大家都不陌生。

再簡單介紹下 :before 和 :after：

  • 默認 display: inline；

  • 必須設置 content 屬性，否則無效；

  • 默認 user-select: none，即 :before 和 :after 的內(nèi)容無法被用戶選中；

  • 不可通過 dom 使用，就是本身不存在的頁面元素，HTML 源代碼里，找不到它們，但從視覺上，卻能看到它們的存在。

下面我們看一下主要使用場景：

插入字符

使用 content 插入字符一般是給空元素設置默認值，類似 input 的 placeholder 屬性一樣，只在元素沒有內(nèi)容的時候展示，代碼如下：

<p>有內(nèi)容的段落</p>
<p></p>

<!--:empty 是一個 CSS 選擇器，當元素里面無內(nèi)容的時候進行匹配-->
p:empty::before {
  content: '空元素內(nèi)容';
  color: red;
}

效果如下：

css如何實現(xiàn)帶橫線的箭頭

輔助元素生成

此時核心點不在于 content 生成的內(nèi)容，而是偽元素本身。通常我們會把 content 的屬性值設置為空字符串，使用其他 CSS 代碼來生成輔助元素，或?qū)崿F(xiàn)圖形效果，或?qū)崿F(xiàn)特定布局。

  • 圖形效果

使用 ::after 偽元素插入匿名替換元素，設置 content 為空，此元素沒有內(nèi)容，通過 CSS 樣式來達到想要的圖形效果。代碼如下：

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

效果如下：

css如何實現(xiàn)帶橫線的箭頭

  • 清除浮動

清除浮動主要是為了解決，父元素因為子級元素浮動引起的內(nèi)部高度為 0 的問題，代碼如下：

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: '';
 display: block;
 clear: both;
}

上面三者缺一不可：

  • content: ''：通過 ::after 給元素添加一個空的偽元素。

  • clear: both：清除浮動，使得元素周圍兩邊都不浮動。

  • display: block：clear 只對塊級元素生效。

通過添加元素清除浮動，觸動 BFC，使元素的高能夠自適應子盒子的高。

圖片生成

直接用 url 功能符顯示圖片，既可以在文字前后添加圖片，又可以直接替換文字。

圖片直接替換文字，代碼如下：

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url('../assets/test2.jpg');
}

文字前后添加圖片，代碼如下：

<!--方案一 -->
.img-test::after {
  content: url('../assets/test2.jpg');
}

<!--方案二 -->
.img-test::after {
  content: '';
  display: block;
  height: 20px;
  width: 20px;
  background: url('../assets/test2.jpg');
}

方案一中偽元素通過 content 設置圖片，圖片的尺寸不好控制，顯示圖片為原尺寸，比較模糊，一般使用方案二背景圖片的方式，可以按需設置尺寸。

attr 屬性值內(nèi)容生成

使用 attr 獲取元素屬性值達到效果，一般用于獲取 a 標簽的連接，代碼如下：

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

效果如下：

css如何實現(xiàn)帶橫線的箭頭

到此，相信大家對“css如何實現(xiàn)帶橫線的箭頭”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

網(wǎng)頁名稱：css如何實現(xiàn)帶橫線的箭頭
當前URL：http://www.muchs.cn/article18/ishegp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、企業(yè)網(wǎng)站制作、定制開發(fā)、關(guān)鍵詞優(yōu)化、虛擬主機、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化