Alitude Pro – Page Title Fancy Underline

[defree99]

I really like the underline beneath the page titles in one of the showcase websites here:

http://www.ashleyhorner.co/our-team/

I'm referring to the underline in this screenshot:

http://tinyurl.com/zfzcutt

I did a page inspection but I don't see where this is located.

I would like to create my own version of this, without the need to manually add it to each page.

I'm starting from my own generic Atitude Pro template here:

http://tinyurl.com/jb7msu2

How can I do the Title underline function using my own graphic?

[Victor Font]

The developer is using CSS borders to draw that fancy line. This is copied from their style sheet:

.entry-header {
    position: relative;
    background: #fff;
    border: 3px solid red;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 30px;
}

.entry-header::before {
    border-color: rgba(255,0,0,0);
    border-top-color: red;
    border-width: 14px;
    margin-left: -14px;
}

.entry-header::after {
    border-color: rgba(255,255,255,0);
    border-top-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}

.entry-header::before,
.entry-header::after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[defree99]

Thank you!

[Author]

Posts