All geek questions in one place

Partial Width Borders

How can I create borders that do not stretch the entire width of a given field? For instance:.

enter image description here

Do I need to use a separate HTML element with a different width? Or I can achieve this completely with CSS.

+6
source share
2 answers

You can always use CSS: after statement:

<style> div.hr-like:after { height:1px; background:#333; width:25%; display:block; margin:0px auto; content:"" } </style> <div class="hr-like"> foo </div>

Added: Here is an example in jsfiddle

+18
source

You can assign a background image for each partial div and place it along the bottom in the middle. Then the separator may be what you want, and how long you want, like this line of pencil that you got there.

 #content { background: transparent url('http://placekitten.com/200/10') no-repeat bottom center; }

Sorry for the kittens ...

0
source

Source: https://habr.com/ru/post/888684/

More articles:


All Articles