Streaming live at 10am (PST)

Fixed Border Width


#1

Hi !

I'm trying to achieve something like that :

Is there any way to fix a width for the border different from the width of the button element ?

Note : For those who want to access my public share link, it is not on the main page but on the "Antoine" page.

Thanks.


Here is my public share link: LINK
(how to access public share link)


#2

Hey @antoinebell,

I don't think you can do this.
The best way to achieve this is

DELETE EVERYTHING.

Do this structure

Link Block
Text
Div

Link Block is container menu here
Text is text menu here
Div is Border

Set container-menu height, put relative, add padding

Style Text`

On borderdo

50% width, 2px height
Absolute bottom
White background
Put Opacity on 0%

Go back to Container menu and do this

Hope it helps :slight_smile:


#3

Hey, Thanks for the answer !

It is not really working on my side but I found a fix using CSS.

Here is the code :

.navlink-maj-border::after {
content: '';
margin-top: 7px;
display: block;
background-color: #fff;
width: 25px;
height: 1px;
left: 40px;
transition: width 0.2s;
}

.navlink-maj-border:hover::after {
width: 100%;
}

This is the result :


#4

You need to reset button CSS style which is defined by default in a different way for each browser. So you can fix a width for the border different from the width of the button element.
Click here for Legal Typing Services.


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.