溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css如何實現帶橫線的箭頭”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css如何實現帶橫線的箭頭”吧!
方法：1、定義一個空元素；2、用“::before”和content插入橫線，語法“元素::before{content:"——"}”；3、用“::after”和content插入箭頭，語法“元素::after{content:">"}”。
本教程操作環境：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>
說明：::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: '空元素內容';
color: red;
}效果如下：
輔助元素生成
此時核心點不在于 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: '';
position: absolute;
top: 100%;
right: 16px;
width: 4px;
height: 16px;
border-width: 0;
border-right: 12px solid #fff;
border-radius: 0 0 32px 0;
}效果如下：
清除浮動
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為 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 屬性值內容生成
使用 attr 獲取元素屬性值達到效果，一般用于獲取 a 標簽的連接，代碼如下：
<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>
.baidu-link::after {
content: " (" attr(href) ") "
}效果如下：
到此，相信大家對“css如何實現帶橫線的箭頭”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
