CSS下劃線與文字間距，下劃線粗細以及下劃線顏色的設定

阿新 • • 發佈：2019-01-19

最開始的時候瞭解下劃線的屬性是：

text-decoration:underline;

但是，很遺憾的是，對於設計做的下劃線用瀏覽器預設屬性樣式很難調整，使用這個屬性並不能調整下劃線與文字的間距，而且對於下劃線的顏色也不好調整，而使用<u></u>這個標籤也是同樣的效果。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>預設下劃線</title>
    <style>
        .test-underline 
 {
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <p>
        <a class="test-underline">用text-underline 屬性設定下劃線</a>
    </p>
    <p>
        <u>用&lt;u&gt;標籤設定下劃線</u>
    </p>

</body>
</html 
>

效果圖：
這裡寫圖片描述

後來在多次測試中，發現<span></span>可以很方便解決問題，span使用padding-bottom和border-bottom不會影響整體的佈局。

在文字外加上span標籤，再給span標籤設定padding-bottom和border-bottom屬性的值，padding-bottom可以很方便調整下劃線與文字的間距，比如padding-bottom: 5px,下劃線的顏色與粗細用border-bottom就可以改變，比如：border-bottom: 2px solid #f89,如下：

span {
    padding-bottom: 5px;
    border-bottom: 2px solid #f89;
}

利用這種方法，發現下面這種下劃線很容易製作下劃線，簡單例子：

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用span製作下劃線</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: "Microsoft Yahei";
        }
        ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        /*清除浮動*/
        .clearfix {
            *zoom: 1;
        }
        .clearfix:before,.clearfix:after {
            display: table;
            line-height: 0;
            content:  "";           
        }
        .clearfox:after {
            clear: both;
        }
        .nav {
            width: 600px;
        }

        .nav li {
            float:left;         
        }
        .nav a {
            box-sizing: border-box;

            display: inline-block;
            text-align: center;
            width: 100px;
            height: 50px;
            color: #fff;
            padding: 12px 5px;
            background: #424a58;

            text-decoration: none;
            cursor: pointer;
        }
        .nav a.active>span ,  .nav a:hover>span {
            /*關鍵程式碼*/
            padding-bottom: 5px;
            border-bottom:  2px solid #fff;
        }
    </style>

</head>
<body>
    <div>
        <ul class="nav clearfix">
            <li><a class="active"><span>套裝模板</span></a></li>
            <li><a><span>標題</span></a></li>
            <li><a><span>圖片</span></a></li>
            <li><a><span>背景圖</span></a></li>
            <li><a><span>卡片</span></a></li>
            <li><a><span>分割線</span></a></li>
            <li><a><span>關注和原文</span></a></li>
            <li><a><span>名片</span></a></li>
            <li><a><span>其他</span></a></li>
            <li><a><span>貼紙</span></a></li>
            <li><a><span>佈局</span></a></li>
            <li><a><span>零件</span></a></li>         

        </ul>
    </div>
</body>
</html>

效果圖：
這裡寫圖片描述

通過span設定下劃線的關鍵程式碼：

.nav a.active>span ,  .nav a:hover>span {
    padding-bottom: 5px;
    border-bottom:  2px solid #fff;
}

改變下劃線間距和顏色，也不影響整體佈局：

.nav a.active>span, .nav a:hover>span {
    padding-bottom: 9px;
    border-bottom: 2px solid #48C2F9;
}

這裡寫圖片描述

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用span製作下劃線</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: "Microsoft Yahei";
        }
        ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        /*清除浮動*/
        .clearfix {
            *zoom: 1;
        }
        .clearfix:before,.clearfix:after {
            display: table;
            line-height: 0;
            content:  "";           
        }
        .clearfox:after {
            clear: both;
        }
        .nav {
            width: 600px;
        }

        .nav li {
            float:left;         
        }
        .nav a {
            box-sizing: border-box;

            display: inline-block;
            text-align: center;
            width: 100px;
            height: 50px;
            color: #fff;
            padding: 12px 5px;
            background: #424a58;

            text-decoration: none;
            cursor: pointer;
        }
        .nav a.active>span ,  .nav a:hover>span {
            padding-bottom: 8px;
            border-bottom:  2px solid #fff;
        }
    </style>

</head>
<body>
    <div>
        <ul class="nav clearfix">
            <li><a class="active"><span>套裝模板</span></a></li>
            <li><a><span>標題</span></a></li>
            <li><a><span>圖片</span></a></li>
            <li><a><span>背景圖</span></a></li>
            <li><a><span>卡片</span></a></li>
            <li><a><span>分割線</span></a></li>
            <li><a><span>關注和原文</span></a></li>
            <li><a><span>名片</span></a></li>
            <li><a><span>其他</span></a></li>
            <li><a><span>貼紙</span></a></li>
            <li><a><span>佈局</span></a></li>
            <li><a><span>零件</span></a></li>         

        </ul>
    </div>
</body>
</html>

《CSS揭祕》中也有一些下劃線自定義的方法：
（1）用border-bottom

a[href]{
    border-bottom: 1px solid gray;
    text-decoration: none;
}

（2）用display:inline和line-height一起來調整與文字得間隙

display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;

（3）還可以用box-shadow來模擬下劃線

box-shadow: 0 -1px gray inset;

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>《CSS揭祕》自定義下劃線</title>
    <style>
        body {
            font-family: "Microsoft Yahei";
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .underline1 {
            border-bottom: 1px solid gray;
        }
        .underline2 {
            display: inline-block;
            border-bottom: 1px solid gray;
            line-height: .9;
        }
        .underline3 {
            box-shadow: 0 -1px gray inset;
        }
    </style>
</head>
<body>
    <p>
        <a class="underline1" href="#">
            用border-bottom 來自定義下劃線
        </a>
    </p>
    <p>
        <a class="underline2">
            用display:inline-block 和 line-height 調整下劃線間距
        </a>
    </p>
    <p>
        <a class="underline3">
            用box-shadow 模擬下劃線
        </a>
    </p>
</body>
</html>

效果如下：
這裡寫圖片描述

轉載自：http://blog.csdn.net/ann295258232/article/details/52691369

CSS下劃線與文字間距，下劃線粗細以及下劃線顏色的設定

最開始的時候瞭解下劃線的屬性是：text-decoration:underline;1但是，很遺憾的是，對於設計做的下劃線用瀏覽器預設屬性樣式很難調整，使用這個屬性並不能調整下劃線與文字的間距，而且對於下劃線的顏色也不好調整，而使用<u></u>這個標

ubuntu下useradd與adduser差別，新建用戶不再home文件夾下

net tle title ubuntu下 home forum .net useradd ng- useradd username不會在/home下建立一個目錄username adduser username會在/home下建立一個目錄username us

Linux下阻塞與非阻塞，同步與非同步的關係及IO模型

一、阻塞與非阻塞，同步與非同步的關係 1、同步同步，就是在發出一個功能呼叫時，在沒有得到結果之前，該呼叫就不返回。也就是說事情必須一件一件地做，等前一件做完了才能做下一件事。 2、非同步非同步，就是在發出一個功能呼叫時，呼叫者不會立刻得到結果。實際處理這個呼叫的部

傳統wms與SaaS wms，誰將會是下一個勝出者？

WMS倉儲系統被稱作為倉庫的大腦，庫內驗收、上架、揀貨、複核、打包、內配、盤點等環節都離不開WMS的管理，目標更是指向於更高效、更精準的倉儲作業。近年來，隨著線上運營和平臺類資訊服務技術的快速發展，WMS也緊隨時代步伐，逐步向SaaS產品化發展。【傳統WMS】VS【SaaS

FEDay會後-Serverless與雲開發，可能是前端的下一站

進化本身是生物體與環境之間持續不斷的資訊交換的具體表現。 —— 摘自《資訊簡史》很榮幸在9月21號成都舉辦的第五屆FEDay上作為講師為大家分享騰訊雲在近兩年推出的雲開發相關的技術和知識，成都是個非常好的城市，就是火鍋太辣，費馬桶~ 我初次接觸前端是讀書期間的第一份實習工作，在SAP上海研究院TIP B

robotframework 判斷下拉框是否存在，如果存在就執行下拉框操作，不存在就跳過執行下拉框操作，進行下一步操作；

新頁面存在 robot sel log 是否 work val image #本人新手，僅做學習記錄之用因為工作要求，打開的ui頁面，根據前面篩選的條件不同，跳轉的新頁面不同，本記錄涉及的就是有下拉框和沒有下拉框，所以要對新打開的頁面進行判斷；run keyword

如何在window10下安裝FileZilla服務端，然後虛擬機器vb下的centos訪問該伺服器？

知識點一、Filezilla客戶端作用：通過服務端提供的ip/username/password,連線服務端可以將客戶端的檔案上傳到伺服器端事先設定後的共享目錄下（shared directory）可以在客戶端瀏覽到共享目錄的檔案結構可以將共享目錄中的檔案

劍指offer32（1,2,3）--從上往下列印二叉樹，分行從上往下列印二叉樹，按之字形順序列印二叉樹

從上往下列印二叉樹題目描述從上往下打印出二叉樹的每個節點，同層節點從左至右列印。思路：層序遍歷，用到佇列 /* struct TreeNode { int val; struct TreeNode *left; struct TreeNode *right;

在win8下安裝tomcat8.0後，點選bin 目錄下的啟動檔案startup.bat後，控制檯一閃而過，根本啟動不了tomcat

tomcat 8 解壓解壓然後執行 \bin\startup.bat ，如果是黑色視窗一閃就過的話. 開啟 startup.bat檔案找到搜尋 set EXECUTABLE ,然後在這行上面加上一句 set JAVA_HOME= 你的jdk安裝位置的絕對路徑

設定Textview的Drawableleft、Drawableright 等圖片與文字間距、位置和大小的方法

給自己記錄點筆記順便也給用的著的朋友給點參考設定Textview的Drawableleft 等圖片的間距的問題以Textview舉例想得到如下圖的Textview效果public class MyText extends TextView { public MyT

css實現圖片與文字底邊對齊

通常圖片與文字放在一起的時候圖片往往會偏上，通過設定margin-bottom可以達到文字圖片底邊對齊的目的我們在做網頁的時候, 會遇到一個圖片和文字位置對不齊的問題.(一般表現在圖片總是比文字高點) 解決問題最好的辦法：.一個關鍵的屬性: margin-bott

CSS 控制容器內文字個數，超出容器後顯示省略號小技巧，大用處

注意：css3標準，ie6, 不支援firefox 容器 { width:200px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } white-space:n

關於ios9 是否允許橫豎屏設定，以及狀態列顏色設定

關於橫豎屏的設定方法，首先工程裡的這幾個選項的優先順序應該高於這幾個個方法，下面幾個方法可以在這個基礎之上做微調，比如要求某個頁面可以橫豎屏，另外一個頁面只能橫屏，其他所有頁面只能豎屏，這種設定需求。一、首先可以在AppDel裡面設定支援的模式，這是UIApplica

1.1.15 word調整文字與下劃線之間的間距

先請按CTRL+U快捷鍵，或點選“下劃線”按鈕，然後輸入一個空格，再輸入文字“下劃線間距”，在文字的尾部再新增一個空格。選中文字內容（注意不要選中首尾的空格），單擊選單“格式”→“字型”，在“字型”設定“字元間距”，在“位置”下拉框中選擇“提升”，接著改變“磅值”框中的數字，預設提升值為3磅。 &n

《css揭祕》下（偽元素，文字背景，垂直居中技巧，文字環繞）

本篇主要記錄《CSS3揭祕》一書中後面幾章的常用技巧。 1、偽元素換行先看下HTML程式碼，如下 <div class="demo1"> <div class="text"> <span>當愛的故事剩聽說</span>

href 中 # 與 java_Script:void(0) 的區別(去掉下劃線儲存不了，是CSDN的BUG嗎)

<a href="#"> 點選連結後，頁面會向上滾到頁首，# 預設錨點為 #TOP <a href="JavaScript:void(0)" onClick="window.open()"> 點選連結後，頁面不動，只打開連結 <a href=

css3實現滑鼠懸浮文字上方，文字底部的下劃線向兩邊縮放！

採用css3加偽類的方式顯示當滑鼠懸浮在文字上方時，文字底部出現向兩邊展開的效果！ css部分 .text-underline{ display: inline;

CSS-同一個li下，圖片和文字一起，如何使得全部垂直居中

HTML程式碼 <ul class="wrapper"> 　　<li> 　　　　<img src="../../../assets/top_view1.png" alt="THE CATIC FOREST CASE"/> 　　　　<

從零開始學習html（五）與瀏覽者交互，表單標簽——下

定位開始系統 isp ctr 程序顯示 text 輸入六、使用下拉列表框進行多選 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-T

[Jmeter]jmeter之腳本錄制與回放，優化（windows下的jmeter）

itl 同時 -1 線程租結果獲取優化腳本 eight 次數 [Jmeter]jmeter之腳本錄制與回放，優化（windows下的jmeter）一、錄制腳本： 1、啟動jmeter 2、添加線程組 3、添加http代理 4、配置代理 a、jmeter側（註

CSS下劃線與文字間距，下劃線粗細以及下劃線顏色的設定

相關推薦