如何在元素之後添加信息，但不容易添加內容？

我使用:after在div後添加內容，但您知道它會添加到div的文本，但不會添加到div的邊框旁邊。如何在元素之後添加信息，但不容易添加內容？

#div2 { 
 

 
    width: 300px; 
 
    height: 100px; 
 
    background-color: beige; 
 
} 
 

 
#div2:after { 
 

 
    content: "a"; 
 
    top: 5px; 
 
    bottom: 5px; 
 
    right: 5px; 
 
    width: 1px; 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>title</title> 
 
    <link rel="stylesheet" href="styles/index.css" type="text/css"> 
 
</head> 
 
<body> 
 

 
<div id="div2"> 
 
    div2-text 
 
</div> 
 

 
</body> 
 
</html>

我可以輕鬆地添加邊框div的幀後（你可以看到div的背景色）？

來源

2017-05-04 s-n-2

你必須將它定位，否則它就會之前添加（：之前）或之後（：之後）元素的內容 – ggdx

這是你的意思嗎？

#div2 { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: beige; 
 
} 
 

 
#div2:after { 
 
    position: absolute; 
 
    content: ""; 
 
    top: 5px; 
 
    right: -5px; 
 
    width: 1px; 
 
    height: 90px; 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>title</title> 
 
    <link rel="stylesheet" href="styles/index.css" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <div id="div2"> 
 
    div2-text 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-05-04 13:25:48

我不認爲這是不適用的。 –

@ s-n-2我知道你正在尋找div的邊界後面的'：after'。 '：after'裏面的'a'在div的邊界之外。我瞭解你的問題嗎？ –

內容應該在div的右側，你設置'：after'背景顏色，你可以看到內容仍然在div中，但不在div之外。 –

會推薦你的DIV，你有內容之後再創建一個空div，以絕對位置的解決方案並不好/有用的，因爲你將有更多的東西在您的網站和那麼他們將在您的「a」文本或您將添加的任何文本之上：after。所以才創建另一個DIV :-)

來源

2017-05-04 13:30:17 Lycidias

放在一個span文字和應用:after到span

#div2 { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: beige; 
 
} 
 

 
#div2 span:after { 
 
    content: "after"; 
 
}

<div id="div2"> 
 
    <span>div2-text</span> 
 
</div>

來源

2017-05-04 13:53:05

如何在元素之後添加信息，但不容易添加內容？

回答

相關問題