Underlining lines in full width, not only text

Question

Hi,
I'm currently trying to set something up with HTML/CSS that looks like a post-it note.

An Image of what I'm aiming at

Please note that every line should be underlined, no matter how many characters are in that line. Also every new line should be underlined completely.

HTML:

<p>
    <img src="http://trööt.net/img/pin.png" alt="Stecknadel"/>
    <font>Heading</font><br />
    <span class="blockMargin">
    <span class="underline">
        <strong>Subheading</strong> text text text
    </span>
    </span>
</p>

CSS:

p {
    background-Color: #ffc; 
    padding: 1em; 
    width: 40em; 
    box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7); 
    text-align: justify;
}
img{
    float: None;  
    height: 4em; 
    display: block; 
    margin-left: Auto; 
    margin-right: Auto;
}

.blockMargin{
    display: block; 
    margin-bottom: -1px;
}

.underline{
    border-bottom: 1px dotted #c03;
}

This is the code I'm currently using (got the idea already from stackoverflow.com). However, it doesn't underline the lines complete but works exactly like text-decoration: underline...

Any ideas? Maybe I should add that I create this using WordPress and the Nuclear-Theme.

Thank you very much for your help!

Example on JSFiddle: http://jsfiddle.net/8w9Lj7nd/

Please split your HTML and CSS and set up an example of what you have created on JSFiddle.net — Rvervuurt, Aug 30 '15 at 11:44
Possible duplicate of [CSS Styling text areas like notebook-look](https://stackoverflow.com/questions/8304436/css-styling-text-areas-like-notebook-look) — Benny Bottema, Feb 17 '18 at 11:43

score 10 · Answer 1 · answered Aug 30 '15 at 13:02

10

http://jsfiddle.net/8w9Lj7nd/1/

There you go.

.underline{
border-bottom: 1px dotted #c03;
width: 100%;
display: block;
}

answered Aug 30 '15 at 13:02

NubPro

497
2
9

Thank you! It looks perfect in JSFiddle... unfortunately, something prevents it from working on my page. The lines aren't displayed at all. I guess Wordpress or the theme somehow do this?! – trootnet Aug 30 '15 at 13:33
inspect the elements or try !important. – NubPro Aug 30 '15 at 13:42

Benny Bottema · Answer 2 · 2018-02-17T17:59:27.167

This is answered here:

I took the other answer and upgraded it to SCSS to make it configurable. You can now easily change size and color of the holes and rules and everything will size accordingly.

Also, I added another example that uses an editable div instead of a textarea.

example

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

Unfortunately, Stackoverflow doesn't support SCSS, so I just included a snapshot of one fixed configuration here:

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  -webkit-background-size: 100% 20px;
  background-size: 100% 20px;
}

<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>

Underlining lines in full width, not only text

2 Answers2