Photoshop Question posted in
The official user guide can be found here.

How to put a line on top of text in html? – Photoshop

So I want to try to do this in html and css but I can’t seem to find anything. I only way I can think is by importing the text as an image but that will look bad. P.S Light blue line is for centering as I am designing the site in Photoshop first What I want to do in html and css

<p class="test">
Conact Me
</p>

.test {
border-top-style: solid;
border-bottom-style: solid;
border-bottom-width: 1px;
}
Tags:

5

Answers


  1. 0

    Try using borders to achieve the look you are wanting:

    a.my-class {
    display: inline-block;
    padding: 5px 15px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    line-height: 1em;
    text-decoration: none;
}
    Login or Signup to reply.
  2. 0

    You can use border-top in css to create a line above text.

    .mytextbox {
    border-top: 1px solid #ff0000;
}

    border-top property

    Example of use

    Login or Signup to reply.
  3. 0

    A simple solution is using text-decoration: underline overline;.

    p {
  text-decoration: overline underline;
}
    <p>
CONTACT ME
</p>
    Login or Signup to reply.
  4. 0

    Well, you’d want to have the text element within a div, set the bg color property of the div to the color you’re going for, and then set margins for the text element to push off the text by ~10px or so (looks like that’s about where it’s at in your mock up). From there you can set a border to only top, and bottom and style accordingly.

    Login or Signup to reply.
  5. 0

    You can put the text inside a block level element and apply a top and bottom border. Advantage of this method against the text-decoration: underline overline; is, that you can simply define the space between text and lines with padding as you need it.

    To make the width as long as the text is, just use display: inline-block;.

    body {
  background: #5cc8f6;
}

div {
  display: inline-block;
  padding: .5em;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  color: white;
  text-transform: uppercase;
  font-family: Verdana;
  font-size: 2em;
}
    <div>Contact me</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search