2018-09-30 22:01:58 +00:00
---
id: 587d781b367417b2b2512abb
title: Create a Horizontal Line Using the hr Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/c3bR8t7'
2019-08-05 16:17:33 +00:00
forumTopicId: 301049
2021-01-13 02:31:00 +00:00
dashedName: create-a-horizontal-line-using-the-hr-element
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
# --instructions--
Add an `hr` tag underneath the `h4` which contains the card title.
**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
# --hints--
Your code should add an `hr` tag to the markup.
```js
assert($('hr').length == 1);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
The `hr` tag should come between the title and the paragraph.
```js
assert(code.match(/< \/h4 > \s*?< hr ( > |\s*?\/>)\s*?< p > /gi));
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > < s > Google< / s > Alphabet< / h4 >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > < s > Google< / s > Alphabet< / h4 >
< hr >
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```