複雜的雙文本下劃線

所以我正在創建一個頭字體帶下劃線的效果。我想要下劃線來擴展標題所在的div的寬度。但是我希望直接位於文本下面的下劃線區域是單獨的顏色。因此，在文本下它應該是藍色的，但下劃線不再在文本下面的時候，它應該是灰色的。我正在計算一個雙邊界系統會工作，但我不確定是否可以再用CSS來做這件事......是嗎？複雜的雙文本下劃線

來源

2013-07-20 user1709061

我將不得不福爾摩斯解釋這一點，你可以提供圖像 – user2580076

從我得到了理解，你可以做兩個div。一個用於標題文本，帶有藍色的「border-bottom」，然後是一個全寬的右邊的div，邊框是灰色的。但是，再次，我可能是錯誤的，因爲我沒有圖片可以離開。 – 2013-07-20 03:39:19

這是固定定位here。如果你試着用相對的方式去做，它會變得更有趣，但仍然有點作品。希望有所幫助！

HTML：

<div class="outer"> 
    <div class="word">My Word</div> 
</div>

CSS：

.outer { 
left: 0px; 
top: 0px; 
height: 20px; 
width: 200px; 
border-bottom: 2px solid grey; 
overflow: visible; 
position:fixed; 
} 
.word { 
position: fixed; 
top: 0px; 
width: 80px; 
margin-bottom: -1px; 
border-bottom: 2px solid blue; 
}

來源

2013-07-20 03:40:03

或者，你可以把它們放在一起，然後將它們都浮在左邊，灰色的全寬和藍色的只有文本的寬度。這個雖然是+1。 – 2013-07-20 03:47:32

是的，我剛纔注意到，沒有固定或絕對的位置，邊界奇怪。人們會以某種方式獲得另一個的兩倍。雖然沒有嘗試漂浮。 –

這裏還有一個快速的解決方案。將500像素更改爲任何你想要的，可以是一個百分比。

HTML

<div class="blue"> 
    Header 
</div> 
<div class="grey"> 
    &nbsp; 
</div> 
<div class="clear"> 
</div>

CSS

.blue { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border-bottom: 2px solid blue; 
    float: left; 
    overflow: hidden; 
    position: absolute; 
    z-index: 0; 
} 

.grey { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border-bottom: 2px solid grey; 
    float: left; 
    width: 500px; 
    overflow: hidden; 
    position: absolute; 
    z-index:-1; 
} 

.clear { 
    clear: both; 
}

例子：http://jsfiddle.net/UuYvv/

來源

2013-07-20 03:54:57

我應該是一個更具體一點...看看這張圖片： – user1709061

http://www.dualdigitaldesign.com/underline.jpg在「事件」下的就是我要去的地方。這是一個我正在編輯的Wordpress模板（並且是一個響應式模板），因此在這裏爲h3標籤添加額外的div是最後的手段，因爲它不是一件容易的事。 – user1709061

複雜的雙文本下劃線

回答

相關問題