'Horizontal line - Login Form [duplicate]

I am trying to add a horizontal line aligned to the word "or" in this login form, however i can not get it to work as it will just align underneath the word. https://i.stack.imgur.com/12byj.png

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Lato', Arial, sans-serif;
}

#loginForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="new 1.css">
</head>

<body>
  <form id="loginForm">
    <input type="text" class="login-username" placeholder="Username/E-mail" autofocus="true" required>
    <input type="password" class="login-password" placeholder="Password" required>
    <button type="submit" class="login-submit" name="submit">Login</button>
    <a id="forgotPass" href="#" class="login-forgot-pass">Forgot password?</a>
    <p>or</p>
    <a id="Signup" href="signup.html">Register</a>
  </form>
</body>

</html>
htmlcss


Solution 1:[1]

Here is an improvement of the old answer using less of code:

.content {
  margin: 10px auto;
  width: 200px;
}

.or {
  text-align: center;
  font-size: 20px;
  background:
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) right;
  background-size: 40% 1px;
  background-repeat: no-repeat;
}
<div class="content">
  <p class="or">or</p>
</div>

Old answer

You may try before/after element like this :

.content {
  margin: 10px auto;
  width: 200px;
}

.or {
  position: relative;
  text-align: center;
  font-size: 20px;
}

.or:before,
.or:after {
  position: absolute;
  content: " ";
  bottom: 10px;
  width: 40%;
  height: 1px;
  background: #000;
}
.or:after {
  right: 0;
}
.or:before {
  left: 0;
}
<div class="content">
  <p class="or">or</p>
</div>

Depending on the styles applied to your page you may change some values to get exactly what you need. You can change bottom value and left of after element and right of before element

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions