hr on height

[nuodas159]

https://css-tricks.com/simple-styles-for-horizontal-rules/

It’s possible to do on height?
smth like that?:

hr {
display: block;
border: 0;
background-image: -webkit-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
width: 1px;
height: auto;
}

[Paulie_D]

Why would you want a horizontal rule that is only 1px wide?

I assume that you mean height as in the post title: http://codepen.io/Paulie-D/pen/uxbKh

[nuodas159]

Hmm, then how make vertical(1px width; height: 100%)?

[Paulie_D]

Yes…what are you intending to do this this?

[Paulie_D]

I would also point out that a 1px wide element won’t show a side to side (ltr or rtl) gradient.

Finally, I checked by updating my Codepen (http://codepen.io/Paulie-D/pen/uxbKh) and height:auto or 100% doesn’t seem to work but that may be for another reason.

[nuodas159]

smth like that.

http://codepen.io/anon/pen/DJets

I want to do hr height: auto. I mean if Block(wrapper) height is 300px then hr is 300px , If block(wrapper) height is 500px then hr is 500px and etc..

[Paulie_D]

To be honest that’s not what the `

---

` is for.

**hr** stands for horizontal rule.

The intention is that it separate two pieces of horizontal content **in the same element** and that isn’t how you are trying to use it.

I’m not saying what you are trying to do is impossible but the height of the `

---

` cannot be automatic (AFAIK)…you would need (I think) JS to determine the height of the wrapper and use that as a basis of the `

---

`.

I’m wondering if CSS-columns might not be a better option (as that has a ‘rule’ feature) but that will depend on the content you are actually proposing to use.

http://codepen.io/Paulie-D/pen/jqxkn

[nuodas159]

Thanks for helping. I found a way how to do it :) (with css)

[Paulie_D]

>I found a way how to do it :) (with css)

Could you show us?

[nuodas159]

http://codepen.io/anon/pen/cDKae

Now I’am thinking how better optimize this code.

P.S. I will use this code in forum ;D

[Author]

Posts