pseudo-element

숨겨져 있는 요소 스타일을 줄 때

사용합니다 ::(pseudo-element)

 

<input type="file" class="input-file">

<style>
.input-file::file-selector-button {
  background:#ddd;
  border:none;
  padding:20px;
}

.input-file::file-selector-button:hover {
  background:#d4d4d4;
}
</style>

 

 

 

float 하단에 적용해보기

 

원래는 <div style="clear:both; float:none"></div> 로 해결했던 것을

가상의 박스를 생성하는 것으로도 가능합니다.

 

<div class="float-end">

.float-end::after {

  content : '';

  display:block;

  clear: both;

  float : none;

}