style.scss
1 @import './assets/styles/global.scss'; 2 3 .search-results li { 4 margin-bottom: calculateRem(32); 5 6 button { 7 text-align: left; 8 width: 100%; 9 padding: 0; 10 11 &:hover h3 { 12 text-decoration: underline; 13 14 &.matched-name::before { 15 display: none; 16 } 17 } 18 19 h3 { 20 color: #fff; 21 font-size: calculateRem(24); 22 display: inline-block; 23 margin-bottom: calculateRem(12); 24 25 &.matched-name { 26 @include hasRedUnderline; 27 position: relative; 28 } 29 } 30 31 h5 { 32 color: #fff; 33 font-size: calculateRem(16); 34 margin-bottom: calculateRem(8); 35 } 36 37 p { 38 color: hsla(0, 0, 100, .6); 39 font-size: calculateRem(14); 40 line-height: 1.6; 41 42 span { 43 position: relative; 44 45 &::before { 46 content: ''; 47 position: absolute; 48 top: -10%; 49 left: -2%; 50 height: 120%; 51 width: 104%; 52 background-color: $red; 53 color: $navy; 54 z-index: -1; 55 } 56 } 57 } 58 } 59 60 .li-header { 61 display: flex; 62 justify-content: space-between; 63 64 > div { 65 color: #fff; 66 display: flex; 67 align-items: center; 68 69 span { 70 margin: 0 calculateRem(12); 71 } 72 } 73 } 74 75 .question-wrap { 76 margin-bottom: calculateRem(20); 77 } 78 }