发表新帖
发表新帖

How can I make a fieldset legend-style “background line” on heading text?

前端 未结
关注
9 1290
后悔当初
后悔当初 2020-11-29 08:31

I\'m attempting to style heading text similar to how your default legend text appears in fieldsets; that is to say, I\'d like a strikethrough-like line to come up to, but no

相关标签:
9条回答
  • 既然无缘
    2020-11-29 09:21 
    body { padding-top: 100px; }

div.parent {
    text-align: center;
    border-top: 1px solid #ccc;
}

div.parent div {
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;
}

    <body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

    This is a fluid-width solution that matches your design and should be ok in IE7 (though I'll admit I didn't check). There are a couple of downsides:

    • You lose the fieldset/legend semantics.
    • You can't put a transparent background on the text.

    If you don't need it to be fluid-width, onteria_'s solution is probably your best bet.

    0 讨论(0)
  • 再見小時候
    2020-11-29 09:22

    With flexbox being supported by all the latest browsers out there, and it being five years since the IE8 requirement was mentioned by the author, I wanted to have some fun building a new solution using that.

    A variety of examples getting more complicated:

    https://jsfiddle.net/0mL79b4h/1/

    https://jsfiddle.net/0mL79b4h/2/

    CSS

    div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

    HTML

    <div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

    Pros:

    • Uses flexbox!
    • Super simple HTML.
    • Left and right sides can be adjusted for asymmetry.
    • Zero background issues, no inheriting colors, etc.
    • Fluid width.
    • Multi-Line support.
    • Left/Center/Right/Custom Alignment: Just adjust the flex property separately for the before and after elements, higher numbers will dedicate more space to that side. Remove one entirely to left or right align it.
    • Interesting effects by playing with the border style (I actually chose a round border in this example). Set height to 0px and use border-top instead for a generic line.

    Cons:

    • Uses flexbox. Call me lazy, but I didn't build in any backward compatibility in this example so it'll look odd on a browser that supports psuedo elements but doesn't support flexbox, although last I checked that was Chrome (Firefox, etc), which are all automatically updated anyway. Might want to use some Modernizr.
    0 讨论(0)
  • 逝去的感伤
    2020-11-29 09:23

    Edit:

    <h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

    Here's how you can do it with a few simple tags and non-breaking spaces.

    I'd use an image and call it a day, but this seemed to work for me:

    CSS

      fieldset {
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  }
  legend {
    margin: 0 25%;
  }

    HTML

    <fieldset>
  <legend>My Text Here</legend>
</fieldset>

    That's the only way I could figure out how to do it with css. Note the width is fixed. Once again I wouldn't do this myself.

    CSS Cat Does Not Approve

    0 讨论(0)
 看不清?
提交回复
热议问题