Some time ago, when I was doing project iteration, I met a requirement that contained a dividing line roughly like this:Then I looked at the way the splitter line was implemented before the project, which was basically like this:

<div>Material Download (Intranet download only)</div>
Copy the code
div{
   height: 40px;
   line-height: 40px;
   text-align: center;
   font-size: 12px;
   color: #ccc;
   position: relative;
   margin-bottom: 15px;

   &::before {
       content: ' ';
       position: absolute;
       left: -20px;
       top: 19px;
       z-index: 1;
       background-color: #ddd;
       width: 35%;
       height: 1px;
   }

   &::after {
       content: ' ';
       position: absolute;
       right: -20px;
       top: 19px;
       z-index: 1;
       background-color: #ddd;
       width: 35%;
       height: 1px; }}Copy the code

As a result, I searched, and found that everyone seems to be so to achieve the partition line, so, I will use their own methods to achieve a set of “beautiful” [partition line], the following is my implementation method:

<fieldset>
	<legend>Material Download (Intranet download only)</legend>
</fieldset>
Copy the code

When I don’t add any styles, it looks like thisNow, let’s give it a little more style kangkang:

fieldset {
  border: 0;
  border-top: 1px solid #ddd;
  text-align: center;

  legend {
    padding: 0 5%; }}Copy the code

Dangdang dangdang, is this a few lines of style, can be presented before and plan the same effect, is a lot less workload, all at once? You can implement both of these in this one that I builtCodePen projectSee.And finally, let’s talk about thisfieldset 和 legendTags:The screenshot above shows its explanation and usage in MDN.

As you can see, the FieldSet tag is actually used to render groups, and we might use it a little bit more in a form, so the Fieldset tag can wrap not only the Legend element, but other elements as well, just like the group’s title. Was thought of by the implementation of the divider because long before learn HTML remember when this property, but it has not been used in practice, because of its style and can’t meet our UI design most of the time, but the day a whim, try holding the attitude, actually found it “best practice”, ha, ha, ha, recommend to everyone ~ ~

Also welcome everyone to pay attention to me, study together, progress together ah:

B station (short video class, basically controlled within 10 minutes, explain a small knowledge point clearly) : Web front-end aliveAmy

CSDN: aliveAmy

Nuggets (haven’t used nuggets much before, but will update it): aliveAmy

If you have any questions, you can send email to me, and I will reply to you in time: [email protected]