How to draw simple line in box with html/css

Question

Simple question, but don't know how to google it.

When no quantity to draw line. How to draw in list box something like this?

Just need simple css answer. Thank you.

CSS doesn’t “draw lines”, it formats existing elements. For something like this, you should probably apply a background image that contains this blue line. — 04FS, Feb 18 '19 at 14:34
Please Refer to this link [https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css] — Sethuraman, Feb 18 '19 at 14:36
Draw a line using an [svg](https://www.w3schools.com/graphics/svg_line.asp) like this, and then apply it to the boxes using background image? — Arup Rakshit, Feb 18 '19 at 14:36

score 2 · Accepted Answer · answered Feb 18 '19 at 14:37

You can do that by adding a pseudo element to the quantity element.

.quantity {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

.quantity--strikethrough:before {
  content: '';
  
  width: 100%;
  height: 2px;
  
  background: blue;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  transform-origin: 50% 50%;
}

<div class="quantity">
  6 vnt.
</div>

<div class="quantity quantity--strikethrough">
  12 vnt.
</div>

score 1 · Answer 2 · answered Feb 18 '19 at 14:39

If you simply want to draw a line on the element, this could be of use to you. Hope it helps!

.element{
  position:relative;
  display: inline-block;
 }
 .element:before{
  content: "";
  height: 1px;
  width: 100%;
  position:absolute;
  top:50%;
  background-color: #000;
 }

<p class="element">Empty</p>

score 1 · Answer 3 · answered Feb 18 '19 at 14:41

.block {
    border: 1px solid;
    display: inline-block;
    margin: 2px;
    padding: 0 2px;
    position: relative;
    overflow: hidden;
}


.line:before {
    position: absolute;
    content: "";
    left: -10%;
    top: 50%;
    right: -10%;
    border-top: 2px solid blue;
    transform: rotate(-35deg);
}

<div class="block">100</div>
<div class="block line">50</div>
<div class="block line">50</div>
<div class="block line">150</div>

score 1 · Answer 4 · answered Feb 18 '19 at 14:44

here is my try

div {
    position: relative;
    display: inline-block;
    border: 1px solid #333;
    padding: 10px;
    float: left;
    margin: 10px;
}

.cutoff {
    overflow: hidden;
}

.cutoff::after {
    height: 1px;
    content: '';
    width: 100%;
    position: absolute;
    background-color: blue;
    left: 0;
    transform: rotate(145deg);
    top: 20px;
}

<div class="">
 some text
</div>
<div class="cutoff">
 some text
</div>
<div class="cutoff">
 some text
</div>

How to draw simple line in box with html/css

4 Answers4