My code is below but it is not working. I want to add a dotted line after each section which has width 100%.
section::after {
border-bottom: 1px dotted red;
}
Asked
Active
Viewed 296 times
0
-
4show us the rest of your code – DCR Feb 07 '20 at 16:55
-
2Pseudo elements require the ['content' property](https://stackoverflow.com/questions/17067918/why-do-the-before-and-after-pseudo-elements-require-a-content-property). – Turnip Feb 07 '20 at 16:56
-
true, but won't give you a line across the page – DCR Feb 07 '20 at 17:09
3 Answers
2
just remove ::after borders apply to elements. adding content won't create a line across the page. Not sure why this was voted down. It works and is pretty straight forward.
section {
border-bottom: 1px dotted red;
}<section></section>
DCR
- 14,737
- 12
- 52
- 115
0
May be ul will be work for you,
HTML:
<ul>
<li><span>Name:</span></li>
<li><span>Age:</span></li>
</ul>
CSS:
ul li {
border-bottom: 2px dotted #ccc;
}
I created a demo for you in JSFiddle
INDRAJITH EKANAYAKE
- 3,894
- 11
- 41
- 63
0
I hope this works for you :
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
width: 100%;
}
section::after {
content: " ";
display: block;
width: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
Abhishek Pakhare
- 476
- 1
- 4
- 15
-
1thanks everyone for your responses. Specialy @Abhishek Pakhare, thanks it worked. – zhuzhi Feb 07 '20 at 17:50
-
You most welcome I am happy this worked for you. All the best. – Abhishek Pakhare Feb 07 '20 at 18:07