Develop Reference

Functionality to search bar in html

I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have to have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>

Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
if (!OpsButton.checked) {
OpsButton.click(); }
}
};
})();

JavaScript Obtain value from Given switch and write it to some file online

The Complete Code is shown below.
I would like to get the value of Switch and write it in some .txt file online and everytime when I'm opening this webpage,It should fetch the value from that .txt file online and update the switch accordingly.Is there any way to do it
I am a Newbie to JavaScript and all my Experience is in Python Programming.Therefore I am asking this question in a perspective of python (Python Files,Web Scraping,etc.)
Is JavaScript Capable enough of fetching some data from a file online and updating it Synchronously ?
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>

Like this for JS part:
let isChecked = document.querySelector("#switch");
isChecked.addEventListener('click', function() {
console.log(isChecked.checked)
})
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input id="switch" type="checkbox" checked />
<span class="slider round"></span>
</label>

Changing checkbox to checked clicking on span does not work

I want to develop a toggle button with a checkbox using css and jquery. I want to click on the span, which represents my toggle button, to change the property checked of the given checkbox.
Unfortunately the span does not change the property. However it goes into the right jQuery function. Using the button, it is going into the function and changing the property. Can you tell me why I cannot use the span to change the property?
$(document).on("click", ".taskcomplete2", function() {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>

You need to attach the click event to the span as well
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
....
});
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>

JS could be not necessary at all, if you set the for attribute on the labels and the id on the input
<label class="switch" for="taskcomplete">
<input type="checkbox" class="taskcompletecheck" id="taskcomplete">
<span class="slider round taskcomplete2"></span>
</label>
So since the span element is nested into the label, if you click it then the checkbox will be toggled.

You can just apply, for attribute to get button click to work, however Please use e.preventDefault();
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>
Demo:
$(document).on("click",".taskcomplete2", function(e){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
e.preventDefault();
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>

$(document).on("click", ".switch", function(e) {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
console.log("Status :: "+$(".taskcompletecheck").prop('checked'));
e.preventDefault();
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>
Apply event on parent element.

Toggle function fires twice on transitionend

I have a toggle whose checked status I am calling with jQuery. Every time I click the toggle from unchecked to checked, the console logs "do this!" twice. Why does this function fire twice and what is the workaround to get it to fire once?
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
if (document.getElementById('my-checkbox').checked) {
console.log("do this!")
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before,
input:checked+.slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>
My final HTML looks like this, for which the event fires three times:
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle">
<span class="number">00</span>
</span>
</label>

There are two transitionend events firing: one from your #my-toggle <span>, one from your ::before pseudo element. You need to differentiate those two events. You’d need the event argument e for that.
The only difference is then found in e.originalEvent.propertyName (for the corresponding CSS property) and e.originalEvent.pseudoElement.
So let’s check for that last property in the if condition.
Also put another && e.target == this in there, since the transitionend event is also firing for children because the event bubbles up. Since you’re only listening to the event on the parent <span>, you can’t simply call e.stopPropagation which would only be useful to prevent the parent(s) from firing the event.
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if (document.getElementById("my-checkbox").checked && !e.originalEvent.pseudoElement && e.target == this) {
console.log("do this!");
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before,
input:checked + .slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id = "my-checkbox">
<span class="slider round" id = "my-toggle">
<span class="number">00</span>
</span>
</label>

This comes from the elements that are concerned by the transition.
If you put a console.log(event) (with putting it as a argument of your event handler), you will see that the concerned properties are background-color and trandform.
These 2 properties are concerned by the transition, so your event hendler is called once per property.
Here is the snippet with "filtering" on transform property:
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){
if (event.originalEvent.propertyName === "transform" && document.getElementById('my-checkbox').checked){
console.log("do this!");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>

Use .slider instead of .switch when looking for the click function, this worked for me and I don't know why.
$('.slider').on('click',function(){
alert("Test");
});

Automatically animated css javascript underline

Need make CSS (Javascript) underline like this (Some Example from codepen)
#import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
background: #004050;
font-family: Quando;
font-weight: 300;
width: 100%;
}
h2, h3 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}
h2 > a, h3 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.uno a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #ffdb00;
}
.dos > a:after {
content: "";
position: absolute;
width: 100%;
height: 7px;
border: 1px solid #000;
bottom: -2px;
left: 0;
background: #fff;
border-radius: 5px;
opacity: 0;
transform: scalex(0);
transition: .5s;
}
.dos.bis > a:after {
opacity: .05;
transform: scalex(1);
}
.dos:hover > a:after {
opacity: .15;
transform: scalex(1);
}
.dos.bis > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FF5E33;
}
h3 > a:before {
content: "";
background: #7FDBFF;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
border-radius: 5px;
transform: scaleX(0);
animation: 1.4s forwards no-hover-v linear;
animation-fill-mode: forwards;
z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
animation: .5s forwards hover-v linear;
animation-fill-mode: forwards;
}
#keyframes hover-v {
0% {
transform: scaleX(0);
height: 5px;
}
45% {
transform: scaleX(1.05);
height: 5px;
}
55% {height: 5px;}
100% {
transform: scaleX(1.05);
height: 3.8rem;
}
}
#keyframes no-hover-v {
0% {
transform: scaleX(1.05);
height: 3.8rem;
}
45% {height: 5px;}
55% {
transform: scaleX(1.05);
height: 5px;
opacity: 1;
}
100% {
transform: scaleX(0);
height: 5px;
opacity: .02;
}
}
p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
<h2>
<a href=''>:hover, please</a>
</h2>
But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.
An when link have mouse hover the underline must be simultaneously grow to right.
Please code how to do this.

Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.
var a = document.getElementById("a");
setTimeout(function() {
a.classList.add("under");
setTimeout(function() {
a.classList.remove("under");
}, 2000);
}, 500);
h2 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
h2 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
position: relative;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
transform-origin: 0 0;
}
h2 > a.under:before {
visibility: visible;
transform: scaleX(1);
}
<h2>
<a id="a" href=''>:hover, please</a>
</h2>