Home / Questions / 148955
Accepted
userStack
Asked: 2020-03-21 14:31:06 +0800 CST 2020-03-21 14:31:06 +0800 CST

Move underline in the middle of the word

  • 772

I currently have 2 underlines that I want to join in the middle of the word

how to move the underline in the middle of the word? when I try it goes down + the word

.err {
  border-top: 2px dotted red;
  display: inline-block;
  position: relative;
  top: 5px;
  z-index: 2;
}

.err:after {
  content: '';
  width: 100%;
  border-top: 2px dotted red;
  position: absolute;
  font-size: 16px;
  top: 5px;
  left: -2px;
  display: block;
  height: 4px;
}
<div>hola
  <div class="err">mundo</div> informatico</div>

The underline should simulate an Error line, but in the middle of the word

enter image description here

I have the underline located above that simulates to be an ERROR line, but I want to center it in the middle

.err {
  border-top: 2px dotted red;
  display: inline-block;
  position: relative;
  top: -1px;
  z-index: 2;
}

.err:after {
  content: '';
  width: 100%;
  border-bottom: 2px dotted red;
  position: absolute;
  font-size: 16px;
  top: -5px;
  left: -2px;
  display: block;
  height: 4px;
}
<div>hola
  <div class="err">mundo</div> informatico</div>

css

3 Answers

  1. Just as you are using the after pseudo-element, you can use the before pseudo-element, you could even use calc() to give it a more suitable location depending on what you want to achieve.

    .err {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.err::before,
.err::after {
  content: '';
  width: 100%;
  border-top: 2px dotted red;
  position: absolute;
  font-size: 16px;
  top: 53%;
  left: -2px;
  display: block;
  height: 4px;
}

.err::before {
  left: 0;
  top: 47%;
}
    <div>hola
  <div class="err">mundo</div> informatico</div>

    • 1
  2. Best Answer

    Don't add the second "error" line in the element, but in another pseudo element, like so:

    .err {
  display: inline-block;
  position: relative;
  color: rgba(0,0,0,.5);
}

.err:after,
.err:before{
  content: '';
  width: 100%;
  z-index: 2;
  border-bottom: 2px dotted red;
  position: absolute;
  font-size: 16px;
  display: block;
  height: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.err:before{
  left: 2px;
  top: calc(50% - 1px);
}
    <div>hola
  <div class="err">mundo</div> informatico</div>

    To put it in the middle, assign the topto 50% of the word and raise it a bit with transform: translateY(-50%).

    For the second line position it however you want using calcand left, example:

    top: calc(50% - 1px);
left: 2px;

    Was this what he needed? Place the word in low opacity, so that it makes better contrast, with black, the red lines are hardly visible.

    • 1

  3. I know you already have solutions using pseudo-elements, I'm going to give you a solution without using them. You can decorate the text directly so that it has a line above the text (with the value "line-through" for text-decoration-line), and that line is wavy (with the value "wavy" for text-decoration-style).

    Here you can see it:

    .err {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
    <div>hola <div class="err">mundo</div> informatico</div>

    But this solution has a couple of problems (at least for now):

    • You can't control exactly how the wavy looks (which is controlled by the browser)
    • Its support is not very widespread (ie it will not look good in IE/Edge)
    • 1