preface
Requirement is like this, as shown in the picture below, to implement such a filter component, the condition can be dynamically increased, click and the word can become or, click again and change back and!
Train of thought
The difficulty of this component lies in how to add the line connecting the option box after the word dynamically. The idea is to divide the line into two parts with the middle as the boundary, namely, two divs, one topLine and one bottomLine as shown below:
Then, divide the top topLine into three parts, and dynamically increase the height of the second div, the first div and the third div remain unchanged, as shown below:
conclusion
Is not difficult, is the trouble point, refueling!