CODEWITHSUNDEEP
htmlcss
CodeTrooper
CodeTrooper

Reputation: 1888

content before an <hr> html element

I have the following scenario. I'm building a web app that makes controllers for exams so you can later print them.

In order to use fill in the blanks, I want to use the <hr> element to render the lines, however each line must be accompanied by a respective letter like this:

a-_____________

b-_____________

so on and so forth. My question is how can you style the <hr> to have content before the actual line starts.

The current CSS of the <hr> is this:

.question-line{
    border-bottom: 1pt solid #333;
    margin-bottom: 25pt !important;
}

Upvotes: 2

Views: 888

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use Flexbox to position hr at the bottom of pseudo-element and css counter for letters.

body {
  counter-reset: hrCounter;                    
}
hr {
  width: 100px;
  border: none;
  border-bottom: 1px solid black;
  display: flex;
  align-items: flex-end;
  margin: 15px;
}
hr:before {
  counter-increment: hrCounter;                
  content: counter(hrCounter, lower-alpha) "-"; 
  transform: translateX(-100%);
}
<hr>
<hr>
<hr>

Upvotes: 0

A.J. Uppal
A.J. Uppal

Reputation: 19264

Just use FlexBox:

.mytextdiv{
  display:flex;
  flex-direction:row;
   align-items: center;
}
.mytexttitle{
  flex-grow:0;
}

.divider{
  flex-grow:1;
  height: 1px;
  background-color: #9f9f9f;
}
<div class="mytextdiv">
  <div class="mytexttitle">
    a
  </div>
  <div class="divider"></div>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

You could create a row out of them and put your text in a normal element.

.row {
  display: flex;
  align-items: flex-end;
  margin: 0 0 25px;
}

hr {
  margin: 0;
  padding: 0;
  border: solid #333;
  border-width: 0 0 1px;
  flex: 1 0 0;
}
<div class="row">
  <span>a-</span>
  <hr>
</div>

<div class="row">
  <span>b-</span>
  <hr>
</div>

Upvotes: 1

tech2017
tech2017

Reputation: 1806

check this fiddle. is it something you need?

.question-line::before {
    content: "a-";
    margin-left: -10px;}

https://jsfiddle.net/bq5683bf/1/

Upvotes: 0

Related Questions