利用屬性選擇器對外部鏈接進行樣式設計
你可能會注意到，你訪問的一些網(wǎng)站上的外部鏈接旁邊會顯示一個小圖標。這對用戶來說非常有幫助，因為它讓他們知道這個鏈接會將他們帶到站點外部。
我們可以簡單地使用屬性選擇器來實現(xiàn)外部鏈接的自定義樣式。
使用屬性選擇器
CSS 允許我們根據(jù) HTML 元素的屬性來設置樣式，方法是將它們放在方括號中。例如，我們可以為具有 hidden 屬性的任何元素設置 display 屬性為 none：
[hidden] {
display: none;
}我們還可以在屬性等于特定值時設置元素的樣式。對于表單元素，我們可以為特定輸入類型設置樣式，而不必使用類：
input[type='checkbox'] {
accent-color: deeppink;
}對于我們的外部鏈接，當 href 屬性包含指向外部網(wǎng)站的鏈接時，我們想要應用樣式。我們不知道確切的值是什么（并且在樣式表中添加每個單獨的 URL 是不切實際的?。覀冎纼炔挎溄樱ㄖ赶蛘军c上其他帖子的鏈接）將以斜杠開頭，而外部鏈接將以 https:// 開頭。因此，我們可以只為以 http 開頭的鏈接設置樣式，通過在我們的屬性選擇器中插入一個 ^ 字符：
a[href^='http'] {
/* 外部鏈接的樣式 */
}或者我們可以使用其他運算符來確定不同的樣式條件：
/* 準確匹配 URL */
a[] {
}
/* URL 中任何位置有 'css' */
a[href*='css'] {
}
/* 以 .info 結尾 */
a[href$='.info'] {
}
/* 類中包含單詞 'link' */
a[class~='link'] {
}此外，通過在結束括號前添加 s 或 i，我們可以控制它們是區(qū)分大小寫還是不區(qū)分大小寫地比較：
/* 區(qū)分大小寫 */
a[href*='css-irl' s] {
}
/* 不區(qū)分大小寫 */
a[href*='css-irl' i] {
}設置偽元素的樣式
對于我們的外部鏈接，我們將通過設置偽元素的樣式來附加一個圖標。這里我們使用 content 屬性和一個 base64 編碼的 SVG，因為圖標非常簡單。但你也可以使用一個圖像 URL、另一個字符或表情符號。我們可以添加一個小邊距，使其稍微遠離文本。
a[href^='http']::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");
margin-left: 0.25em;
}使用 content 屬性和 SVG 的一個問題是我們無法完全控制圖標的大小。它使用 SVG 的固有尺寸。如果我們想將圖標應用于任何外部鏈接，而不考慮字體大?。ɡ鐦祟}），我們可能更適合使用 background-image 屬性。我們可以設置寬度和高度（以 em 為單位，它們相對于字體大?。⑹褂?nbsp;background-size 確保我們的 SVG 覆蓋整個區(qū)域。
我們需要將 content 屬性設置為空字符串，否則偽元素不會渲染。我們還需要將 display 屬性設置為 inline-block。
（注：我使用了自定義屬性來簡化圖像 URL 的表示。）
a[href^='http']::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
background-size: 100%;
background-image: url(--var(svgUrl));
}防止孤立圖標
這種方法還有一點可以改進。目前，圖標可能會換行到文本的下一行，留下一個不受歡迎的孤立圖標。
圖片
如果我們對偽元素添加 position: absolute，并對錨元素添加一些右側填充，則圖標將不會單獨換行。
圖片
a[href^='http'] {
padding-right: 1.25em;
}
a[href^='http']::after {
position: absolute;
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
background-size: 100%;
background-image: url(--var(svgUrl));
}不幸的是，這個技巧在最新版本的 Chrome 中不起作用。
以下是完整代碼：
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Helvetica', sans-serif;
line-height: 1.6;
margin: 0;
padding: 1em;
}
.container {
max-width: 380px;
overflow: hidden;
padding: 1rem;
border: 1px solid;
resize: horizontal;
}
a {
color: inherit;
}
a[href^='http'] {
padding-right: 1.25em;
background: pink;
}
a[href^='http']::after {
position: absolute;
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
background-size: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");
transform: translateY(0.25em);
}
