使用CSS在僞元素前後創建左箭頭

如何翻轉此圖以獲得第二個左箭頭？

a { 
 
    display: inline-block; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    padding: 10px 15px 10px 10px; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 

 
a:before, a:after { 
 
    border-right: 2px solid; 
 
    content: ''; 
 
    display: block; 
 
    height: 8px; 
 
    margin-top: -6px; 
 
    position: absolute; 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    -webkit-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    right: 10px; 
 
    top: 50%; 
 
    width: 0; 
 
} 
 

 
a:after { 
 
    margin-top: -1px; 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
a:hover, a:focus, 
 
a:hover:before, a:hover:after, 
 
a:focus:before, a:focus:after { 
 
    color: #000; 
 
}

<a class="arrow"></a>

來源

2015-03-13 michaelmcgurk

爲什麼不使用font-awesome的雪佛龍呢？ – Robin 2015-03-13 09:28:26

@robin字體真棒並不真棒。字體圖標在Opera Mini中不起作用，對可訪問性不利。今天，圖標應該使用SVG。但是，這個CSS箭頭非常適合在沒有額外標記的情況下在鏈接上顯示一個可視箭頭，同時讓屏幕閱讀器忽略（不會說出）箭頭。 – hexalys 2016-07-15 05:19:25

您可以旋轉箭頭180deg這樣的：

a { 
 
    display: inline-block; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    padding: 10px 15px 10px 10px; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
.left{ 
 
    -webkit-transform:rotate(180deg); 
 
    -ms-transform:rotate(180deg); 
 
    transform:rotate(180deg); 
 
} 
 

 
a:before, a:after { 
 
    border-right: 2px solid; 
 
    content: ''; 
 
    display: block; 
 
    height: 8px; 
 
    margin-top: -6px; 
 
    position: absolute; 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    -webkit-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    right: 10px; 
 
    top: 50%; 
 
    width: 0; 
 
} 
 

 
a:after { 
 
    margin-top: -1px; 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
a:hover, a:focus, 
 
a:hover:before, a:hover:after, 
 
a:focus:before, a:focus:after { 
 
    color: #000; 
 
}

<a class="arrow"></a> 
 
<a class="arrow left"></a>

您還可以scaley(-1)而不是旋轉實現相同的輸出。

還有一些方法更簡單的方法，使這個箭頭，你可能要檢查這個帖子有箭頭的這樣一個偉大的名單：How to Make A Fancy Arrow Using CSS?

來源

2015-03-13 09:28:03

變換分析CSS屬性不會有很多的設備上工作。我建議你使用Unicode符號。

這裏是箭頭的列表：http://unicode-table.com/en/sets/arrows-symbols/

來源

2015-03-13 09:27:02 Yann

或者您可以使用邊框

:root{text-align: center} 
 
a{width: 10px; height: 10px; position: relative} 
 
a:before, a:after { 
 
    color: black; 
 
    border-right: 2px solid currentcolor; 
 
    border-bottom: 2px solid currentcolor; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px 
 
} 
 

 
a:before{ 
 
    left: -16px; 
 
    transform: rotate(135deg) 
 
} 
 
a:after{ 
 
    right: -16px; 
 
    transform: rotate(-45deg) 
 
}

<a></a>

來源

2015-03-13 20:43:51

使用CSS在僞元素前後創建左箭頭

回答

相關問題