Подчеркивание текста с использованием перехода на загрузку страницы с задержкой

Question

Я уже давно это делаю, и до сих пор я не очень далеко. У меня есть этот код (CSS), и я хочу подчеркнуть конкретный текст (от середины до конца) примерно через 8 секунд после загрузки страницы, я могу узнать только часть: hover (я хочу, чтобы подчеркивание появилось 8 секунд после того, как страница загружались, не имея парить над элементом):

#sec { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
#sec:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 
#sec:hover:after { 
    width: 100%; 
    background: blue; 
} 

и HTML:

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div> 

Я пытаюсь получить <div id="sec"> подчеркнуть 8s [econds] после загрузки страницы.

Answer 1

Как об использовании анимации (ключевые кадры), проверить фрагмент кода

PS: Run сниппет и подождите 8 секунд.

#sec { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
@-webkit-keyframes border { 
 
    from {width: 0px;} 
 
    to {width:100%} 
 
} 
 

 
#sec:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: blue; 
 
    -webkit-animation-name: border; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-name: border; 
 
    animation-duration: 1s; 
 
    animation-delay: 8s; 
 
    animation-fill-mode: forwards; 
 
}

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div>