Как изменить длину border bottom - Исправление ошибок и поиск оптимальных решений проблем

I have a link that’s styled with

a:hover {
    border-bottom: 3px solid #fff;
}

And looks like this:

But I need to resize the length of the border like this:

Any ideas on how I can do this? Thanks

asked Aug 28, 2015 at 7:13

This is how I would do it:

a:hover:after {
    content: ' ';
    text-decoration: none;
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    margin-left: 25%;
    border-bottom: solid 3px black;
}

Here is the JSFiddle demo

answered Aug 28, 2015 at 7:22

Ahs NAhs N

8,1731 gold badge27 silver badges33 bronze badges

It is better to use text-decoration in your situation
Like this

.underLineText:hover{
     text-decoration:underline
}

And HTML like this

<p>Co<span class="underLineText">ntact</span>&nbsp;Us</p>

answered Aug 28, 2015 at 7:20

If you can use the ::after pseudo-element, you can give styles to that one.

body {
  background-color:#800;
}
#contact {
  color:white;
  position:relative;
  text-decoration:none;
}
#contact:hover::after {
  position:absolute;
  display:block; content:'';
  left:25%; right:25%; bottom:0;
  border-bottom:3px solid;
}

<a id="contact" href="#">Contact Us</a>

Or, if you can’t use ::after, maybe something like this.

body {
  background-color:#800
}
#contact {
  color:white;
  text-decoration:none;
  display:inline-block;
  position:relative; left:1em;
  width:3em; overflow:visible;
  text-indent: -1em;
  white-space:nowrap;
}
#contact:hover {
  border-bottom:3px solid;
}

<a id="contact" href="#">Contact Us</a>

(This one is more fussy though; the position of the underline depends on the font size and you may have to fiddle around a bit to get it in the right position.)

answered Aug 28, 2015 at 7:19

Mr ListerMr Lister

44.9k15 gold badges109 silver badges148 bronze badges

There may be more than one way. I think;

<div class="linkDiv">
    <a>Link</a>
    <div class="border"></div>
</div>

<style type="text/css">.border:hover{width:50%;border-bottom:3px solid #fff}</style>

answered Aug 28, 2015 at 7:26

Here is my solution: Try to test this in the fiddle

hr {
        border-bottom-style: solid;
        border-bottom-color: #96d9f3;
        border-bottom-width: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: inline-block;
        width:20em; 
        overflow:visible;
    }

Html:

<hr />

answered Jul 28, 2022 at 9:52

Источник

the picture below has 2 divs, 1 is the part where the login form and the other is where the buttons on facebook and twitter, then I want is to put a border but with a specific length, which would where is the red box.

The width of first div is: 850px and the second is: 30% over the first!

I hope I have explained!

HTML

<div id="top">
    <!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span><a href="#login" id="inicia">Inicia sesión</a> ó <a href="registro.php" id="registro">registrate!</b></span>-->
    <div id="loginform">
        <form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
            <input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
            <input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
            <a href="#login" id="dologin" name="dologin">Iniciar</a> ó
            <a href="registro.php" id="dosignup" name="dosignup">Registrarse</a>
            <span id="errorlogin"></span>
        </form>
    </div>
    <span id="currentUser"></span>

    <!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
    <ul id="socialmedia">
        <li><a href="http://www.twitter.com"><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></a></li>
        <li><a href="http://www.facebook.com"><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></a></li>
    </ul>
</div>

CSS

#top {
    height:50px;
    background:white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-bottom:none;
}
#topsocial{
    width:30%;
    padding: 5px;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%;
    background:white;
    overflow:hidden;
    float:right;
    position: relative;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-top: none;
}

I’ve have another question, how quit or delete box-shadow from top to second div #topsocial?

Источник

The width of first div is: 850px and the second is: 30% over the first!

I hope I have explained!

HTML

<div id="top">
    <!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span><a href="#login" id="inicia">Inicia sesión</a> ó <a href="registro.php" id="registro">registrate!</b></span>-->
    <div id="loginform">
        <form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
            <input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
            <input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
            <a href="#login" id="dologin" name="dologin">Iniciar</a> ó
            <a href="registro.php" id="dosignup" name="dosignup">Registrarse</a>
            <span id="errorlogin"></span>
        </form>
    </div>
    <span id="currentUser"></span>

    <!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
    <ul id="socialmedia">
        <li><a href="http://www.twitter.com"><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></a></li>
        <li><a href="http://www.facebook.com"><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></a></li>
    </ul>
</div>

CSS

#top {
    height:50px;
    background:white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left: 4px;
    -webkit-border-top-right: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-bottom:none;
}
#topsocial{
    width:30%;
    padding: 5px;
    border-bottom-left-radius: 50% 75%;
    border-bottom-right-radius: 50% 75%;
    background:white;
    overflow:hidden;
    float:right;
    position: relative;
    -webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 8px 16px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 8px 16px rgba(50, 50, 50, 0.79);
    border: 5px solid black;
    border-top: none;
}

I’ve have another question, how quit or delete box-shadow from top to second div #topsocial?

Источник

Sometimes, you may have difficulty when you need to make the border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll need to use border properties and some elements such as <span>, <div>, etc., or pseudo-elements.

The solution is quite easy. Just follow the steps below.

Create two <div> elements.

<div id="box">
  <div id="borderLeft"></div>
</div>

Style the <div> with an id «box» by using the height, width, and background properties. Set the position to “relative” and specify the border-bottom property.
Style the <div> with an id «borderLeft» by specifying its border-left property. Set the position to “absolute” and add the top and bottom properties.

#box {
  height: 70px;
  width: 70px;
  position: relative;
  border-bottom: 2px solid #0004ff;
  background: #cccaca;
}

#borderLeft {
  border-left: 2px solid #0004ff;
  position: absolute;
  top: 50%;
  bottom: 0;
}

Let’s see the result of our code.

Example of limiting the left border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box {
        height: 70px;
        width: 70px;
        position: relative;
        border-bottom: 2px solid #0004ff;
        background: #cccaca;
      }
      #borderLeft {
        border-left: 2px solid #0004ff;
        position: absolute;
        top: 50%;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="borderLeft"></div>
    </div>
  </body>
</html>

Result

Next, we’re going to demonstrate another example, where we limit the border length of four different elements. For that, we use four <div> elements and the :before pseudo-element. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively.

Example of limiting the borders using pseudo-elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        margin: 50px;
        color: #000;
      }
      div {
        width: 150px;
        height: 60px;
        position: relative;
        z-index: 1;
        background-color: #ffff3b;
        margin: 20px auto;
        padding: 20px;
        color: #726E97;
      }
      div.top:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 5px;
        width: 50%;
        border-top: 3px solid #000;
      }
      div.bottom:before {
        content: "";
        position: absolute;
        left: 25px;
        bottom: 0;
        height: 15px;
        width: 70%;
        border-bottom: 3px solid #000;
      }
      div.left:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-left: 3px solid #000;
      }
      div.right:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-right: 3px solid #000;
      }
    </style>
  </head>
  <body>
    <h1>Example of limiting border length</h1>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>

Источник

If you are like me you have ran into this issue many times. You want to add a border to the bottom of an element but you don’t want it to be under 100% of the element. You just want it to be under a bit of it. My first thought was maybe CSS would let you establish a width for border-bottom… No such luck. You can go in to the HTML and add another element below the element you want to have the border-bottom and give it a background that is the color you want the border to be and then set the width and height, which is what I have done for years.

Skip straight to the code.

This always left me asking a question…
Can this be done in css?

Which led me to the answer…
Not really.

There isn’t a way to declare the length of a border, but I found a pretty slick work around using nothing but CSS.

Instead of adding a border to the element you are trying to effect add a pseudo element of :after and give it a border-bottom and set the width. Done.

What would that look like?
Here is an example of what it could look like:

Example

How exactly does that work?

Let’s say you are trying to add a border-bottom to an element with the class of “page-title“. Your code would look like this.

.page-title:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
}

If you have enjoyed this post please checkout “Part 2” where I explain how to add some animation with pure css.

That is all there is to it! I hope this helps.

Please leave comments with any questions or concerns. We love hearing from this community of creative individuals.

If you ever need any assistance with CSS, HTML, PHP, jQuery or WordPress just contact us. Serving people with integrity and finding elegant solutions to problems is what we do.

Part 2

Check out some of our other helpful web design posts!

Change Active Menu as you Scroll with JQuery

How to Fix a Cookies Blocked Error on WordPress Admin Dashboard

How to Reduce the Size of your Webpage

How to Install a Plugin in WordPress

Steck Insights Web Design seeks to provide professional, custom WordPress website solutions, quickly, efficiently and cost-effectively. You can count on us to follow web standards for safety, coding, SEO and speed.

Источник

Example of limiting the left border:

Result

Example of limiting the borders using pseudo-elements:

Читайте также: