適當的方法來定位：在僞元素之前

定位:before和:after僞元素的正確方法是什麼？我一直在用一堆不同的方式搞亂，但沒有一個看起來像是非常優雅的解決方案。適當的方法來定位：在僞元素之前

這就是我想要做的事：

enter image description here

這是我做過什麼：

div.read-more a:before { 
    content: url('/images/read_more_arrow_sm.png'); 
    position: absolute; 
    top: 4px; 
    left: -15px; 
} 

<div class="read-more"> 
    <a href="#">Read More</a> 
</div>

我基本上只是希望圖像與文本對齊。還有另一種方法可以做到嗎？

如果我可以在:before圖片上使用填充和邊距，那麼應該是就是您的工作。但由於某種原因，這一直不適合我。我可以添加水平填充和邊距，但頂部和底部填充不起任何作用。爲什麼會發生？

來源

2011-10-24 Syren

爲什麼不給相匹配的'一'背景圖片，並添加一些左填充，而不是？ – BoltClock

除非每頁有數十/數百個，否則我認爲你最好忘記僞元素，而只是將圖像和鏈接放置在下兩個位置。 –

您的示例中的文本是「觀看視頻」和「：之前」內容的箭頭？爲什麼不使用背景圖片？請發佈您的HTML標記。 –

嘗試使用background代替content，把一個佔位符content：http://jsfiddle.net/7X7x2/1/

來源

2011-10-24 19:31:17

這工作完美。謝謝！ – Syren

如果你只想位置圖像文本附近，那麼你可能需要垂直-align屬性：

div.read-more a:before { 
    vertical-align: bottom; 
    content: url(image.png); 
}

它有以下可能的值：基線，超，頂部，文本頂部，中間，底部，文本底部

這值從當前文本行的文本位置計算得出（在示例中閱讀更多內容）。

完全參考：http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

（要添加空格前的文本只是用保證金右）

來源

2011-10-24 20:02:40

它是否適用於之前的元素？ – zardilior

似乎完全沒有效果：之前，：元素之後（Chrome 59）。不知道爲什麼這個答案有代表。因爲很明顯這不太可能適用於這個特定的環境 – Smithfield

@Smithfield對我來說工作得很好：https：//jsfiddle.net/p8y6fv8h/你能在那裏發揮作用嗎？ –

您可以依次使用下面的代碼來移動內容：

div.read-more a:before { 
    content: "\00BB \0020"; 
    position: relative; 
    top: -2px; 
}

來源

2013-05-05 17:59:12

這是我的解決方案，用鼠標懸停：

div.read-more a:before { 
    content: url(image.png); 
    position: relative; 
    top: 3px; 
    left: -7px; 
    padding-left: 7px; 
} 
div.read-more a:hover:before { 
    content: url(image_hover.png); 
}

來源

2014-11-13 12:44:54 Bas

你需要做position：相對於.read-more，然後你可以改變位置。

來源

2016-11-01 10:29:44 Bunty

編輯@Richard JP勒岡的撥弄，因此請求的版本多了幾分

HTML

<div class="read-more"> 
    <a href="#">Read More</a> 
</div>

CSS

div.read-more a:before { 
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT; 
    content:""; 
    width:21px; 
    height:21px; 
    display: inline-block; 
    vertical-align: sub; 
    margin-right: 4px; 
    line-height: 21px; 
} 
div.read-more { 
    background: red; 
    line-height: 21px; 
    display:block; 
    vertical-align:middle; 
    width: max-content; 
    padding: 4px; 
} 
div.read-more a{ 
    color: white; 
    text-decoration:none; 
}

http://jsfiddle.net/7X7x2/688/

來源

2018-01-26 03:43:22 thebigsmileXD

適當的方法來定位：在僞元素之前

回答

相關問題