css怎麼實現有橫線的箭頭-前端問答-PHP中文網

css怎麼實現有橫線的箭頭

青灯夜游

發布： 2022-04-25 18:58:20

原創

4922 人瀏覽過

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

css怎麼實現有橫線的箭頭

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css實作橫線的箭頭

#實作方法：

##定義一個空元素，（例如不包含內容的span標籤）
使用::before選擇器和content屬性插入橫線
使用::after選擇器和content屬性插入箭頭

實作範例：

<!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怎麼實現有橫線的箭頭

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

::before 選擇器向選定的元素前插入內容。

::after選擇器往選定的元素後插入內容。

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

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

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

預設display: inline;

#必須設定content 屬性，否則無效;
#預設user-select: none，即:before 和:after 的內容無法被使用者選取；
無法透過dom 使用，就是本身不存在的頁面元素，HTML 原始碼裡，找不到它們，但從視覺上，卻能看見它們的存在。

插入字元

使用content 插入字元一般是給空元素設定預設值，類似input 的placeholder 屬性一樣，只在元素沒有內容的時候展示，程式碼如下：

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

登入後複製

效果如下：

css怎麼實現有橫線的箭頭 # 輔助元素生成

此時核心點不在於content 產生的內容，而是偽元素本身。通常我們會把 content 的屬性值設定為空字串，使用其他 CSS 程式碼來產生輔助元素，或實現圖形效果，或實作特定佈局。

圖形效果

使用::after 偽元素插入匿名取代元素，設定content 為空，此元素沒有內容，透過CSS 樣式來達到想要的圖形效果。程式碼如下：

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

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  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怎麼實現有橫線的箭頭

#清除浮動

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

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

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

登入後複製

content: ' '：透過::after 為元素加上一個空的偽元素。

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

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

圖片產生

直接用 url 功能符號顯示圖片，既可以在文字前後添加圖片，又可以直接取代文字。圖片直接取代文字，程式碼如下：

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

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

登入後複製

文字前後加入圖片，程式碼如下：

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

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

登入後複製

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

attr 屬性值內容產生

使用attr 取得元素屬性值達到效果，一般用於取得a 標籤的連接，程式碼如下：

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

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

登入後複製

效果如下：

（學習影片分享：
css影片教學、
web前端
）
以上是css怎麼實現有橫線的箭頭的詳細內容。更多資訊請關注PHP中文網其他相關文章！