悬停区域-底部边框

Question

我有以下导航菜单：https://jsfiddle.net/LauraStoian/5kmo0v7e/ 4。

body {
  border: solid 3px black;
}

#UL_1 {
  align-items: stretch;
  block-size: 103px;
  box-sizing: border-box;
  display: flex;
  height: 103px;
  inline-size: 241.828px;
  justify-content: flex-end;
  letter-spacing: 0.16px;
  margin-block-end: 0px;
  margin-block-start: 0px;
  margin-inline-start: 141.453px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  padding-inline-start: 0px;
  perspective-origin: 120.906px 51.5px;
  text-size-adjust: 100%;
  transform-origin: 120.914px 51.5px;
  width: 241.828px;
  flex: 1 1 auto;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
  margin: 0px 0px 0px 141.453px;
  padding: 0px;
}


/*#UL_1*/

#UL_1:after {
  block-size: 0px;
  box-sizing: border-box;
  clear: both;
  content: '"' '"';
  display: table;
  height: 0px;
  inline-size: 0px;
  letter-spacing: 0.16px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 0px 0px;
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  width: 0px;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#UL_1:after*/

#UL_1:before {
  block-size: 0px;
  box-sizing: border-box;
  content: '"' '"';
  display: table;
  height: 0px;
  inline-size: 0px;
  letter-spacing: 0.16px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 0px 0px;
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  width: 0px;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#UL_1:before*/

#LI_2 {
  align-items: center;
  block-size: 103px;
  bottom: 0px;
  box-sizing: border-box;
  display: flex;
  height: 103px;
  inline-size: 72.875px;
  left: 0px;
  letter-spacing: 0.16px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 36.4375px 51.5px;
  position: relative;
  right: 0px;
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 36.4375px 51.5px;
  width: 72.875px;
  flex-flow: column nowrap;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_2*/

#LI_2:after {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_2:after*/

#LI_2:before {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_2:before*/

#A_3 {
  align-items: center;
  block-size: 103px;
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: flex;
  height: 103px;
  inline-size: 72.875px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  padding-block-end: 10px;
  padding-block-start: 10px;
  padding-inline-end: 15px;
  padding-inline-start: 15px;
  perspective-origin: 36.4375px 51.5px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 36.4375px 51.5px;
  white-space: nowrap;
  width: 72.875px;
  border: 0px none rgb(0, 0, 0);
  flex: 1 1 auto;
  flex-flow: row wrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
  padding: 10px 15px;
  transition: all 0.3s ease 0s;
}


/*#A_3*/

#A_3:after {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_3:after*/

#A_3:before {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_3:before*/

#SPAN_4,
#SPAN_12,
#SPAN_18 {
  block-size: 0px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 0px;
  inline-size: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 0px 0px;
  text-align: left;
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  white-space: nowrap;
  width: 0px;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_4, #SPAN_12, #SPAN_18*/

#SPAN_4:after,
#SPAN_12:after,
#SPAN_18:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_4:after, #SPAN_12:after, #SPAN_18:after*/

#SPAN_4:before,
#SPAN_12:before,
#SPAN_18:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_4:before, #SPAN_12:before, #SPAN_18:before*/

#SPAN_5 {
  block-size: 26px;
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 26px;
  inline-size: 42.875px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 21.4375px 13px;
  position: relative;
  right: 0px;
  text-align: left;
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 21.4375px 13px;
  white-space: nowrap;
  width: 42.875px;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_5*/

#SPAN_5:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_5:after*/

#SPAN_5:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_5:before*/

#SPAN_6,
#SPAN_14,
#SPAN_20 {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  perspective-origin: 0px 0px;
  text-align: left;
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  white-space: nowrap;
  z-index: 0;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_6, #SPAN_14, #SPAN_20*/

#SPAN_6:after,
#SPAN_14:after,
#SPAN_20:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_6:after, #SPAN_14:after, #SPAN_20:after*/

#SPAN_6:before,
#SPAN_14:before,
#SPAN_20:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_6:before, #SPAN_14:before, #SPAN_20:before*/

#SPAN_7,
#SPAN_15,
#SPAN_21 {
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  left: 0px;
  letter-spacing: 0.3px;
  perspective-origin: 0px 0px;
  position: relative;
  right: 0px;
  text-align: left;
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 0px 0px;
  white-space: nowrap;
  z-index: 2;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_7, #SPAN_15, #SPAN_21*/

#SPAN_7:after,
#SPAN_15:after,
#SPAN_21:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_7:after, #SPAN_15:after, #SPAN_21:after*/

#SPAN_7:before,
#SPAN_15:before,
#SPAN_21:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_7:before, #SPAN_15:before, #SPAN_21:before*/

#SPAN_8 {
  align-items: center;
  block-size: 36px;
  box-sizing: border-box;
  cursor: pointer;
  display: none;
  height: 36px;
  inline-size: 36px;
  justify-content: center;
  letter-spacing: 0.3px;
  margin-inline-start: 18px;
  position: absolute;
  text-align: left;
  text-size-adjust: 100%;
  top: 50%;
  white-space: nowrap;
  width: 36px;
  z-index: 3;
  border-radius: 3px;
  font: 700 18px / 26px Arial, sans-serif;
  list-style: outside none none;
  margin: 0px 0px 0px 18px;
}


/*#SPAN_8*/

#SPAN_8:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 18px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_8:after*/

#SPAN_8:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 18px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_8:before*/

#I_9 {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 18px / 18px FontAwesome;
  list-style: outside none none;
}


/*#I_9*/

#I_9:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 18px / 18px FontAwesome;
  list-style: outside none none;
}


/*#I_9:after*/

#I_9:before {
  box-sizing: border-box;
  content: '""';
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 18px / 18px FontAwesome;
  list-style: outside none none;
}


/*#I_9:before*/

#LI_10 {
  align-items: center;
  block-size: 103px;
  box-sizing: border-box;
  display: flex;
  height: 103px;
  inline-size: 74.8281px;
  letter-spacing: 0.16px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 37.4062px 51.5px;
  text-size-adjust: 100%;
  transform-origin: 37.4141px 51.5px;
  width: 74.8281px;
  flex-flow: column nowrap;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_10*/

#LI_10:after {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_10:after*/

#LI_10:before {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_10:before*/

#A_11 {
  align-items: center;
  block-size: 103px;
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: flex;
  height: 103px;
  inline-size: 74.8281px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  padding-block-end: 10px;
  padding-block-start: 10px;
  padding-inline-end: 15px;
  padding-inline-start: 15px;
  perspective-origin: 37.4062px 51.5px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 37.4141px 51.5px;
  white-space: nowrap;
  width: 74.8281px;
  border: 0px none rgb(0, 0, 0);
  flex: 1 1 auto;
  flex-flow: row wrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
  padding: 10px 15px;
  transition: all 0.3s ease 0s;
}


/*#A_11*/

#A_11:after {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_11:after*/

#A_11:before {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_11:before*/

#SPAN_13 {
  block-size: 26px;
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 26px;
  inline-size: 44.8281px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 22.4062px 13px;
  position: relative;
  right: 0px;
  text-align: left;
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 22.4141px 13px;
  white-space: nowrap;
  width: 44.8281px;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_13*/

#SPAN_13:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_13:after*/

#SPAN_13:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_13:before*/

#LI_16 {
  align-items: center;
  block-size: 103px;
  box-sizing: border-box;
  display: flex;
  height: 103px;
  inline-size: 94.125px;
  letter-spacing: 0.16px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 47.0625px 51.5px;
  text-size-adjust: 100%;
  transform-origin: 47.0625px 51.5px;
  width: 94.125px;
  flex-flow: column nowrap;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_16*/

#LI_16:after {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_16:after*/

#LI_16:before {
  box-sizing: border-box;
  display: block;
  letter-spacing: 0.16px;
  text-size-adjust: 100%;
  font: 16px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#LI_16:before*/

#A_17 {
  align-items: center;
  block-size: 103px;
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: flex;
  height: 103px;
  inline-size: 94.125px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  padding-block-end: 10px;
  padding-block-start: 10px;
  padding-inline-end: 15px;
  padding-inline-start: 15px;
  perspective-origin: 47.0625px 51.5px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 47.0625px 51.5px;
  white-space: nowrap;
  width: 94.125px;
  border: 0px none rgb(0, 0, 0);
  flex: 1 1 auto;
  flex-flow: row wrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
  padding: 10px 15px;
  transition: all 0.3s ease 0s;
}


/*#A_17*/

#A_17:after {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_17:after*/

#A_17:before {
  border-block-end-color: rgb(0, 0, 0);
  border-block-start-color: rgb(0, 0, 0);
  border-inline-end-color: rgb(0, 0, 0);
  border-inline-start-color: rgb(0, 0, 0);
  box-sizing: border-box;
  caret-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  column-rule-color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none solid rgb(0, 0, 0);
  text-size-adjust: 100%;
  white-space: nowrap;
  border: 0px none rgb(0, 0, 0);
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(0, 0, 0) none 0px;
}


/*#A_17:before*/

#SPAN_19 {
  block-size: 26px;
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 26px;
  inline-size: 64.125px;
  left: 0px;
  letter-spacing: 0.3px;
  min-block-size: auto;
  min-height: auto;
  min-inline-size: auto;
  min-width: auto;
  perspective-origin: 32.0625px 13px;
  position: relative;
  right: 0px;
  text-align: left;
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 32.0625px 13px;
  white-space: nowrap;
  width: 64.125px;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_19*/

#SPAN_19:after {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_19:after*/

#SPAN_19:before {
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: left;
  text-size-adjust: 100%;
  white-space: nowrap;
  font: 700 15px / 26px Arial, sans-serif;
  list-style: outside none none;
}


/*#SPAN_19:before*/

#SPAN_5:hover,
#SPAN_13:hover,
#SPAN_19:hover {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: red;
}

<body>

  <ul id="UL_1">
    <li id="LI_2">
      <a href="http://index.html" id="A_3"><span id="SPAN_4"></span> <span id="SPAN_5"><span id="SPAN_6"></span> <span id="SPAN_7">Home <span id="SPAN_8"><i id="I_9"></i></span></span></span></a>
    </li>
    <li id="LI_10">
      <a href="http://index.html#" id="A_11"><span id="SPAN_12"></span> <span id="SPAN_13"><span id="SPAN_14"></span> <span id="SPAN_15">About</span></span></a>
    </li>
    <li id="LI_16">
      <a href="http://index.html#" id="A_17"><span id="SPAN_18"></span> <span id="SPAN_19"><span id="SPAN_20"></span> <span id="SPAN_21">Services</span></span></a>
    </li>
  </ul>
</body>

页面的链接各有一个悬停，该悬停由底部边框组成。问题是，悬停鼠标仅在鼠标停留在文本上时才会激活，而不是在整个周围区域（上下左右整个区域，左右左右几个px）内起作用。

导航是使用flexbox构建的。我试图将边框应用到＃A_3上，尽管悬停区域扩大了，但边框底部移动得太低。就像是一个悖论，因为要么我不得不将边框移得太低以使悬停区域更大，要么将边框保持在应有的位置，但是悬停仅适用于文本。

这是因为边框位于填充之后，并且悬停仅适用于填充区域。我在其他网站上看到这种样式是用after伪元素完成的，我尝试过这种方式，但是没有用。

所以，我的问题是，如何在将边框底部保持在文本下方的同时扩展悬停区域？

Answer 1

我相信您希望将LI悬停，并且内部跨度应获得边界。

Updated jsfiddle

为此，只需将您的css悬停如下所示

#LI_2:hover #SPAN_5,
#LI_10:hover #SPAN_13,
#LI_16:hover #SPAN_19 {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: red;
}