I need help about how to link likes with Firebase and show real time count? How should I connect this https://firebase.google.com/docs/database/web/lists-of-data with HTML page?
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
#keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true"></i> Like
</button>
</div>
</body>
</html>
This is my basic code for Like HTML Page with like button. The event should happen on click. Thanks in advance.
Imagine the data is like :
posts
-post1
-likes
-caption
-id
-photoLink
-post2
-likes
-caption
-id
-photoLink
The JS code looks like:
var ref = firebase.database().ref('posts');
ref.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key; //holds id like posts1,posts2
var childData = childSnapshot.val(); //holds rest of data in object format
displayPosts(childData);
});
});
function displayPosts(childData)
{
var bodyCode='<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true">'+childData.likes+'</i> Like
</button>
</div>';
document.getElementById("post-conatainer").appendChild(bodyCode);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
#keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div id="post-container">
</div>
</body>
</html>
Related
The background appears but after 5 seconds authorization appears
first the circle will appear smoothly and slowly, then the authorization window should appear in this video https://www.youtube.com/watch?v=16j4MkPrI1Y&t=1s
searched all over the internet and couldn't find anything
Maybe I forgot the form somewhere, please help
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
input {
height: 45px;
width: 100%;
color: #385983;
font-size: 14px;
line-height: 16px;
border: 2px solid #E9F2FF;
border-radius: 5px;
padding-left: 25px;
}
input:focus {
outline: none;
border: 2px solid #C1D9FD;
}
main {
background: #F1F5FE;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
z-index: 1;
width: 2534px;
height: 2534px;
border-radius: 50%;
background: #F7FAFF;
box-shadow: 0px 4px 70px 6px rgba(217, 229, 255, 0.25);
animation-name: fadeCircle;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeCircle {
0% {
width: 2534px;
height: 2534px;
}
25% {
width: 2000px;
height: 2000px;
}
50% {
width: 1500px;
height: 1500px;
}
75% {
width: 1000px;
height: 1000px;
}
100% {
width: 534px;
height: 534px;
}
}
.register-form-container {
opacity: 0;
position: relative;
z-index: 2;
max-width: 415px;
width: 100%;
background: #FFFFF;
box-shadow: 0px 6px 50px rgba(217, 229, 225, 0.7);
border-radius: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 38px;
padding-bottom: 38px;
animation-name: fadeForm;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: 1.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeForm {
0% {
opacity: 0;
}
25% {
opacity: .25;
}
50% {
opacity: .5;
}
75% {
opacity: .75;
}
100% {
opacity: 1;
}
}
.form-title {
color: #30507D;
font-weight: 500;
font-size: 20px;
line-height: 23px;
margin-bottom: 38px;
}
.form-field {
margin-bottom: 13px;
}
.button {
font-weight: bold;
font-size: 14px;
display: block;
height: 45px;
background: #247FFF;
border-radius: 5px;
color: #fff;
text-transform: uppercase;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.button:hover {
background-color: #0D6CF2;
}
a.button {
text-decoration: none;
}
.button-google {
color: #C6CFDC;
background: #F2F6FF;
}
.button-google:hover {
background: #E2E6F0;
color: #fff
}
.divider {
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #405D87;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>book.py</title>
</head>
<body>
<main>
<div class="circle"></div>
<div class="register-form-container">
<h1 class="form-title">
Регистрация
</h1>
<div class="form-flield">
<div class="form-flield">
<input type="text" placeholder="Имя">
</div>
<div class="form-flield">
<input type="text" placeholder="Почта">
</div>
<div class="form-flield">
<input type="text" placeholder="Пароль">
</div>
<div class="form-flield">
<input type="text" placeholder="Подтвердить Пароль">
</div>
</div>
<div class="form-buttons">
<buttton class="button">Регистрация</buttton>
<div class="divider">или</div>
Google
</div>
</div>
</main>
</body>
</html>
I've been building my portfolio site and I'm now at the stage of making it more responsive. I built the site while using my monitors, but when the screen shrinks down to a standard laptop (i.e Macbook Pro), the div with my image overlaps with my "text-zone" div/class which contains the headings and information etc. Moving the image div outside of the container with the use of a fragment does not help either so I'm a bit stuck. My intended vision/goal is to have the image next to the text at all times but if the screen gets to small, it will shift under or over the text.
Here is the JSX:
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at xxx | Greater xxx Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
Here is the SCSS
.home-page {
.text-zone {
position: absolute;
left: 30%;
top: 50%;
transform: translateY(-50%);
width: 40%;
max-height: 90%;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
position: absolute;
top: 30%;
right: 20%;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
In my opinion, if you try it like so, you can make it sooner and easier:
.home-page {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 100vh;
.text-zone {
text-align: center;
#media (min-width: 768px) {
width: 40%;
text-align: left;
}
max-height: 90%;
padding: 0 16px;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
margin-top: 140px;
padding: 0 16px;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
#media (min-width: 1200px) {
margin-right: -180px;
}
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at ... | Greater ... Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
I don't even any experiencing programming, but I am trying to put together a FAQ section for our help site and I wanted to use collapsible sections for the Q&A. I made it mostly work as I wanted, however, there is one thing I can't change at all. I have looked around and could not find what is wrong with the code. Any help would be highly appreciated. I really never did this before, so a total newbie here x
The HTML code I am using is:
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</html>
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #7C5A0B;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
This is how the browsers displays it, the blue box text in Italic.
Update:
I am not sure if this is the way to post the resolution, but I finally figured it.
Under .lbl-toggle { instead of using text-transform: none !important; I used font-style: normal; !important . That did the trick! Thanks everyone!
Hello William,
Please give this code a try and let me know the outcome, buddy. I certainly hope this help you solving this issue, mate!
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none !important;
font-style: normal !important;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #e3a514;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
font-style: normal !important;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<html>
<head>
<title>No</title>
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
</head>
<body>
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</body>
</html>
I want to create a custom button for a file upload in a form using simple html and css.
Here is my code.
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div>
if it is just about to design upload button cutomly then this css code is also usefull.
Here is your css
and open the snippet to check.
.upload_field input.wpcf7-file::-webkit-file-upload-button {
border: none;
color: #fff;
font-weight: 500;
background: linear-gradient(90deg, rgba(35,90,75,8) 0%, rgb(33, 169, 99) 35%, rgba(39,203,119,1) 100%);
padding: 4px 18px;
border-radius: 30px;
cursor: pointer;
box-shadow: 2px 1px 9px -3px #25c171;
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:hover {
background: linear-gradient(90deg, rgba(39,203,119,1) 0%, rgba(39,203,119,1) 35%, rgba(14,90,51,1) 100%);
}
.upload_field input.wpcf7-file::-webkit-file-upload-button:focus{
outline:none;
}
.upload_field input.wpcf7-file:focus {
outline: none;
}
.upload_field {
margin-bottom: 20px;
padding-left: 5px;
border: 1px solid #e6e6e6;
padding: 15px 10px 25px;
border-radius: 20px;
}
<div class="upload_field">
<label>Please Upload Your Resume(jpg,png, pdf, doc).<br>
<span class="wpcf7-form-control-wrap file-874"><input type="file" name="file-874" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.png,.pdf,.doc" aria-invalid="false"></span></label>
</div>
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.fa {
margin-left: 10px;
padding: 10px;
background: white;
color : #0e5a33;
border-radius: 50%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn {
border: 2px solid #0e5a33;
background-color: #0e5a33;
box-shadow: 8px 8px 18px 0px rgba(84, 181, 119, 0.3) !important;
font-size: 18px;
padding: 5px 5px 5px 28px;
border-radius: 25px;
color: white;
}
.btn:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
opacity: 1;
-webkit-transform: translate(-105%, 0);
transform: translate(-105%, 0);
background-color: rgba(255, 255, 255, 0.8);
}
.btn:hover:before{
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file<i style="font-size:18px" class="fa"></i></button>
<input type="file" name="myfile" />
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button" style="vertical-align:middle"><span>Upload File </span>
</button>
</body>
</html>
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>