Ra3IDeN Ra3IDeN - 11 months ago 51
CSS Question

How to create a underline with small break in middle with css?

This will be a question that is hard to exmplain but please keep an open mind.

My experiment:

I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.

What I want:

I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.

My css skills are nothing to brag about and I honestly dont even know where to start.

Image that might clarify:

enter image description here

How do I do this?


If you don't need to support older browsers you can create a triangle with borders like so:

.nav-item::after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;

obviously would need moving about to fit where you want it.

If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.