如果您正在創建一個具有跳轉功能的郵箱鏈接,您需要使用一些CSS樣式來讓鏈接看起來更具有吸引力和交互性。以下是一些常用的CSS樣式:
a { color: #0066cc; text-decoration: none; border-bottom: 1px solid #0066cc; } a:hover { color: #003d7f; border-bottom: 2px solid #003d7f; transition: border-bottom 0.2s ease-in-out; }
上述CSS代碼可以幫助您創建一個可點擊的鏈接,當鼠標懸停在鏈接上時,它們會更加明顯。
如果您想要添加一個箭頭圖標來增加交互性,以下是一些CSS代碼:
a::after { content: "→"; margin-left: 5px; font-size: 0.8em; } a:hover::after { transform: translateX(5px); transition: transform 0.2s ease-in-out; }
上述CSS代碼會在鏈接后面添加一個箭頭圖標,并在鼠標懸停時將其向右移動。
如果您想要精確控制箭頭圖標的位置,您可以使用以下CSS代碼:
a { position: relative; display: inline-block; } a::after { position: absolute; top: 50%; transform: translateY(-50%); right: -15px; }
上述CSS代碼將鏈接和箭頭圖標包裝在一個相對定位的容器中,并將箭頭圖標設置為絕對定位。箭頭圖標的位置是相對于容器的,它垂直居中并在鏈接容器的右側。
上一篇重寫后 引用css
下一篇重置的css樣式模板