How to draw simple line in box with html/css - 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.

Answer 1

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>

Answer 2

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>

Answer 3

.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>

Answer 4

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>