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

前端 未结 9 1343
后悔当初
后悔当初 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条回答
  •  猫巷女王i
    2020-11-29 09:02

    Kind of late to the party, but this is my solution: https://jsfiddle.net/g43pt908/

    Requires no images, and doesn't depend on a background color.

    HTML

    Some text

    CSS

    .hr-text {
        border-top: 1px solid #999;
        text-align: center;
        background-color: inherit;
    }
    
    .hr-text span {
        display: inline-block;
        position: relative;
        height: 14px;
        top: -12px;
        font-size: 14px;
        font-style: italic;
        color: #666;
        background-color: inherit;
        padding: 0 10px;
    }
    

提交回复
热议问题