一些樣式不工作：後

我嘗試被添加了:after樣式內容，color: ;被覆蓋，但text-decoration: ;不起作用。

code.html

<html> 
<head> 
    <style> 
     .separate-hyphen *:not(:last-child):after { 
      content: " -\00a0"; 
      text-decoration: none; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <div class="separate-hyphen"> 
     <a href="link1.extension">Link 1</a> 
     <a href="link2.extension">Link 2</a> 
    </div> 
</body> 
</html>

結果（這是一個圖像）

來源

2015-09-26 The Coding Wombat

邊框可以正常工作。在這種情況下你想達到什麼目的？ –

對不起，我不小心使用了邊框，因爲我習慣用邊框替換文字裝飾以獲得更多的控制;我編輯了我的文章 –

因爲僞元素:after呈現內部元素的，不在外面，所以當然造型的它可以在不影響外部容器款式：

+--------------------+ 
|   +--------+ | 
| Content | :after | | 
|   +--------+ | 
+--------------------+

你需要找到另一種方式。也許，以直觀的移動:after以外的容器的絕對定位：

.separate-hyphen *:not(:last-child) { 
 
    margin-right: 10px; 
 
} 
 
.separate-hyphen *:not(:last-child):after { 
 
    content: " -\00a0"; 
 
    text-decoration: none; 
 
    color: red; 
 
    position: absolute; 
 
    padding: 0 5px; 
 
}

<div class="separate-hyphen"> 
 
    <a href="link1.extension">Link 1</a> 
 
    <a href="link2.extension">Link 2</a> 
 
</div>

來源

2015-09-26 12:49:22 dfsq

我明白這是如何工作的;而你的這種技巧是有效的。這是首選方式嗎？同樣的效果可以通過用a元素上的黑底部邊框替換文字裝飾，然後在僞僞元素上放置白色邊框，使黑色邊框隱藏在白色邊框後面來獲得同樣的效果？當我嘗試這樣做時，他們只是堆疊起來。 –

是的，你可以覆蓋元素的邊界上的僞元素邊界。這是這種情況下爲數不多的解決方案之一。只需要正確定位它們。 – dfsq

與text-decoration: none嘗試，而不是border:none。

來源

2015-09-26 12:49:18 sindiploma

這就是我所要做的，對不起;它仍然不起作用，它使相同的輸出（我提供的圖像） –

嘗試是這樣的：

<html> 
 
    <head> 
 
    <style> 
 
     #hyphen { 
 
     color: red; 
 
     text-decoration: none; 
 
     } 
 

 
     .linkz 
 
     { 
 
     color: red; 
 
     padding: 5px; 
 
     font-family: verdana; 
 
     font-size: 18px; 
 
     } 
 
     
 
     #linkcontainer 
 
     { 
 
     border: 3px solid blue; 
 
     padding: 5px; 
 
     border-radius: 11px; 
 
     width: 135px; 
 
     background-color: #6d6; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <p id="linkcontainer"> 
 
     <a href="link1.extension" class="linkz">Link 1</a><a id="hyphen">-</a><a href="link2.extension" class="linkz">Link 2</a> 
 
    </p> 
 
    </body> 
 
</html>

它將什麼工作，我想你想要。

來源

2015-09-26 13:16:24 Gustavo6046

這將完全刪除邊框/文字裝飾。我正在尋找一種方法，僅從使用after之後添加到元素末尾的內容中刪除邊框/文本修飾。 –

我更新了片段。這有效嗎？也很漂亮。 – Gustavo6046

感謝您的更新;它會工作得很好，但不幸的是我只能控制我必須使用它的CSS。我想我會使用這個，當我也可以改變html。 –

一些樣式不工作：後

回答

相關問題